vueのコンポーネント作成時に、dataオプションを追加してコンポーネントに値を渡したいのですが実装できません。
スペルミスも見当たらず、記載に漏れがないと思っているのですが、何か指定し忘れがありますでしょうか?
想定される結果
出力されたテキストにホバーすると、dataのmessageに指定したテキストがツールチップで表示される。
公式のチュートリアルの宣言的レンダリングを参考にコンポーネントを読み込むような仕様に書き換えました。
https://jp.vuejs.org/v2/guide/index.html
実際のvueファイル
コンポーネントを指定するjs
app.jsと言う名前で、次のように指定しています。
import MyApp from './components/my-app' import MyApp2 from './components/my-app-2' var app_1 = new Vue({ el: '#mainvisual', components: { MyApp }, template: '<my-app></my-app>' }); var app_instanse2 = new Vue({ el: '#stady-2', components: { MyApp2 }, data: { message: 'hogehoge' }, template: '<my-app-2></my-app-2>' });
上のapp_1はコンポーネントの表示だけなのエラーは出ませんが、
下のapp_2がdataの値を取得できず、エラーを吐いてしまいます。
読み込むコンポーネント
上記htmlのapp_2で読み込むコンポーネントです。
my-app-2.vue
vue
1<template> 2<span v-bind:title="message"> 3 Hover your mouse over me for a few seconds 4 to see my dynamically bound title! 5</span> 6</template>
html
jsを読み込むhtmlです。
同時に、複数のコンポーネントが読めるか検証していたこともあり、vue用のタグが2つありますが、問題の箇所はidがstady-2
になっている方です。
html
1<!DOCTYPE html> 2<html lang="jp" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>アニメーション実装検証</title> 6 <!--[if IE]> 7 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 8 <![endif]--> 9 </head> 10 <body> 11 <h1>vueテスト</h1> 12 <div id="mainvisual"> 13 <app></app> 14 </div> 15 <div id="stady-2"></div> 16 <script src="bundle.js"></script> 17 </body> 18</html>
表示されるエラー文
下記の内容が表示されます。
messageはapp.jsで指定して言えるので、定義はしていると思います。
Property or method "message" 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. found in ---> <MyApp2> at src/components/my-app-2.vue <Root>
エラー文に書かれているURLを見ては見たのですが、
templateに直接記載する方法で、コンポーネント側にバインドする方法はわかりませんでした。
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/27 07:58
退会済みユーザー
2018/10/27 08:04
2018/10/27 08:14