Vue routerを使って簡単なSPAを作っています。
App.vueのrouter-viewタグ内にTest.vueを読み込んで、clickイベントの動作確認を行いたいのですが、コンソール出力がありません。
App.vueに、Test.vueのtemplateは読み込むことができています。
以下はTest.vueです。どうすれば、クリックイベントを取得できるでしょうか。
JavaScript
1<template> 2 <div> 3 <button @click.native="test">login</button> 4 </div> 5</template> 6<script> 7 export default { 8 methods: { 9 test: function () { 10 console.log('Hello world') 11 } 12 } 13 } 14</script> 15<style> 16</style> 17``` 18 19# 追記:試したことの詳細 201.プロジェクトを作成 21``` 22$ vue init webpack test 23? Project name test 24? Project description A Vue.js project 25? Author 26? Vue build standalone 27? Install vue-router? Yes 28? Use ESLint to lint your code? No 29? Set up unit tests No 30? Setup e2e tests with Nightwatch? No 31? Should we run `npm install` for you after the project has been created? (recommended) npm 32``` 332.componentsにTest.vueを作成 34```Vue 35<template> 36 <div> 37 <button @click="test">login</button> 38 </div> 39</template> 40<script> 41 export default { 42 methods: { 43 test: function () { 44 console.log('Hello world') 45 } 46 } 47 } 48</script> 49<style> 50</style> 51``` 523.index.jsに一部追加 53```js 54import Vue from 'vue' 55import Router from 'vue-router' 56import HelloWorld from '@/components/HelloWorld' 57import Test from '@/components/Test' // 追加部分 58 59Vue.use(Router) 60 61export default new Router({ 62 routes: [ 63 { 64 path: '/', 65 name: 'HelloWorld', 66 component: HelloWorld 67 }, 68 // 追加部分 69 { 70 path: '/test', 71 name: 'test', 72 component: Test 73 } 74 ] 75}) 76```
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/07 10:42
退会済みユーザー
2018/12/07 11:00
2018/12/07 11:47 編集
2018/12/11 08:43