Vue.jsとVueRouterとVuetifyでナビゲーション付きページのシンプルなサンプル

Vue.jsとVuetifyでマテリアルデザインなWebアプリをつくろうにもスタートダッシュでかなり躓くのでメモ CDNのVue.jsではなく単体の.vueをwebpackでコンパイルする方でやります。 まずは各種モジュールのインストール npm install -g vue-cli vue init webpack-simple my-app cd my-app npm install npm install vue-router vuetify –save 次にindex.htmlを編集   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>ui</title> <link href=’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons’ rel=”stylesheet”> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui”> </head> <body> <div id=”app”></div> <script src=”/static/build.js”></script> </body> </html> src/main.jsにvueを使う設定と、ルーティングを記載 今回はPagesフォルダにDashboardとSettingページを作り、それぞれ/と/settingでアクセスできるようにします import Vue from ‘vue’ import App from ‘./App.vue’ import VueRouter from ‘vue-router’ import Vuetify…

vue.jsでinputがバインドできない謎のエラーが発生した

vue.jsでinputのフォームバインディングを行っていたのですが何故かバインディングができなくて以下のようなエラーがでしまいました。 TypeError: Cannot read property ‘_withTask’ of undefined at Xn (vue.esm.js:6799) at lt (vue.esm.js:1974) at Array.Kn (vue.esm.js:6812) at C (vue.esm.js:5730) at k (vue.esm.js:5632) at C (vue.esm.js:5735) at k (vue.esm.js:5632) at C (vue.esm.js:5735) at a.t.nodeOps [as __patch__] (vue.esm.js:5884) at a.t._update (vue.esm.js:2572) webpackでビルドしたあとのエラーなのでなにを言っているのがさっぱりわかりませんでしたが解決方法としてはinputと同時に入れていたbuttonタグのv-on:click=に紐付けているメソッドが存在していないことが原因でした。 以下の場合だとonSend3というメソッドが存在しなかったことが原因となります。 <input type=”text” class=”form-control” v-model=”sample”> <p>{{ sample }}</p> <button type=”button” class=”btn btn-outline-primary” v-on:click=”onSend3″>Send</button> なぜこうなったのかはわかりませんでしたがエラー内容がわかりにくすぎる…