Vue Routerを利用するとProperty or method "x" is not defined とエラーになってしまう

Vue Routerを利用したルーティングで表示を切り替えたいのですが、
templateの中に

html
1<input v-model="title">
2{{ title }}

のように記述すると下記のようなエラーが出てしまいます。

error
1[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
2
3found in
4
5---> <Anonymous>
6       <Root>

初期化のタイミングの問題かと思うのですが、直し方がわかりません。

↓全ファイルはこの様になっています。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
7  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
8</head>
9
10<body>
11  <div id="app">
12    <p>
13      <router-link to="/foo">Foo</router-link>
14      <router-link to="/bar">Bar</router-link>
15    </p>
16    <router-view></router-view>
17  </div>
18</body>
19<script src="script.js"></script>
20</html>

js
1const Foo = {
2  template: 
3  '<div>hello</dev>'
4}
5const Bar = {
6  template:
7  '<div>' +
8  '<input v-model="title">' +
9  '{{ title }}' +
10  '</div>'
11}
12const routes = [
13  { path: '/foo', component: Foo, props: true },
14  { path: '/bar', component: Bar, props: true },
15]
16
17const router = new VueRouter({
18  routes
19})
20
21var app = new Vue({
22  router,
23  data: {
24    title: '',
25  }
26}).$mount('#app')
27

退会済みユーザー

2018/07/23 04:42

何か、参考になさったサイトなどあるかと思われます。また、発生したエラーに対してアプローチした内容等ありましたら詳細に記載されることをオススメします。

soo

2018/07/23 05:05

参考にしたサイトはVue Routerの公式ガイドです https://router.vuejs.org/ja/guide/#html

soo

2018/07/23 05:08

エラーに対して、scriptを読み込む行などをいろいろ試しましたが、修正には至りませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に修正しましたが、データバインディングでURLパラメータを利用せずに、動機をとって使用する場合、同一のコンポーネント内で定義する必要があります。
以下のように、dataを宣言してあげれば子の要素からアクセスできるようになります。

私自身も最近使い始めたばかりでしたので、いい勉強になりました。

Javascript
1    const Foo = {
2        template:
3            '<div>hello</dev>'
4    }
5    const Bar = {
6        template:
7            '<div>' +
8            '<input v-model="title">' +
9            '{{ title }}' +
10            '</div>',
11        data: function () {
12            return {
13                title: 'test',
14            }
15        },
16    }
17    const routes = [
18        { path: '/foo', component: Foo, props: true },
19        { path: '/bar', component: Bar, props: true },
20    ]
21
22    const router = new VueRouter({
23        routes
24    })
25
26    var app = new Vue({
27        router
28    }).$mount('#app')