質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

解決済

1回答

573閲覧

vue-routerでのclickイベント

Matt

総合スコア41

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2018/12/07 09:49

編集2018/12/07 11:58

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```

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

@click.native の .native を外したら動きませんか?

投稿2018/12/07 10:30

shou6

総合スコア305

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Matt

2018/12/07 10:42

外しても動きませんでした
退会済みユーザー

退会済みユーザー

2018/12/07 11:00

.native修飾子はコンポーネントの場合のみ利用できます。 私の環境でも同一のコードで確認してみましたが、shou6さんの仰る通り、.nativeを外すことで動作しました。 動かない理由はコード外にあるのかもしれません。
Matt

2018/12/07 11:47 編集

環境はWindows10 Pro,vue -V:2.9.6,npm :6.4.1です。
Matt

2018/12/11 08:43

dockerを使って別の環境で動かしたら動きました!詳しい原因はわかりませんがバージョンの問題だったと考えられます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問