コンポーネント内で on click ディレクティブを使用しようとしていますが、うまくいかないようです。コンポーネントをクリックしても、コンソールに「test clicked」が表示されるはずなのに何も起こりません。コンソールにエラーは表示されないので、何が間違っているのかわかりません。
インデックス.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuetest</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
アプリ.vue
<template>
<div id="app">
<test v-on:click="testFunction"></test>
</div>
</template>
<script>
import Test from './components/Test'
export default {
name: 'app',
methods: {
testFunction: function (event) {
console.log('test clicked')
}
},
components: {
Test
}
}
</script>
Test.vue (コンポーネント)
<template>
<div>
click here
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
ベストアンサー1
コンポーネントのルート要素でネイティブイベントをリッスンしたい場合は、。ネイティブの修飾子はv-on次のようになります。
<template>
<div id="app">
<test v-on:click.native="testFunction"></test>
</div>
</template>
または、コメントで提案されているように、省略形で次のようにすることもできます。
<template>
<div id="app">
<test @click.native="testFunction"></test>
</div>
</template>