によって処理される単純なコンポーネントがあり<script type="text/x-template"...、divを表示するかどうかを制御するプロパティが1つしかない独自のデータオブジェクトがあります。
コンソールで次の警告が表示されます。
[Vue警告]：プロパティまたはメソッド「showDiv」はインスタンスで定義されていませんが、レンダリング中に参照されます。データ オプションでリアクティブ データ プロパティを宣言してください。（ルートインスタンスにあります）
ライブデモ：https：//jsbin.com/zucaqog/edit？html、js、output
Js：
Vue.component('my-comp', {
template: '#my-comp',
data: function() {
return { showDiv: false };
}
});
new Vue({
el: '#app',
data: {}
});
showDiv: false親のdataオブジェクトに追加すると、警告は表示されなくなります。ただし、このデータプロパティはコンポーネントのローカルスコープにのみ関連するため、これは避けたいと思います。コンポーネントのhtmlを文字列として入れればうまくtemplate: ...いくのではないかと思いますが、むしろscript。の中に入れたいと思います。
これは、子コンポーネントのテンプレート定義が#appdivの子として存在するためです。親コンポーネントはshowDiv、テンプレート内に変数への参照があることを確認しているため、エラーをスローしています。
それをdivのx-template外に#app引き出します：
<div id="app">
<my-comp></my-comp>
</div>
<script type="text/x-template" id="my-comp">
<div>
Value of showDiv is {{showDiv}}.
<button @click="showDiv=!showDiv">Toggle showDiv</button>
</div>
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加