BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】Vueのv-on:clickがコンポーネントに効かない。

2022-03-31 15:46:54

質問

コンポーネント内でon clickディレクティブを使おうとしているのですが、うまくいきません。コンポーネントをクリックすると、コンソールに「test clicked」と表示されるはずなのに、何も起こりません。コンソールには何のエラーも表示されないので、何が間違っているのかわかりません。

index.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>

App.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>

解決方法は？

コンポーネントのルート要素でネイティブイベントをリスニングしたい場合は .ネイティブ モディファイアで 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>

詳細の参照先 ネイティブイベント

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します