テンプレート内にVue-jsをレンダリングできません

Question

テンプレート内にVue.js "stuff"を使用することはできますか？私はこれを行うにしようとしていますが、私がしようとするたびに、何もレンダリングしないと私は

[Vueの警告]と言うコンソールで価値のないメッセージを取得：エラー匿名コンポーネントをレンダリング：

を画面に表示されるものは何もなく、Vue.jsに問題があるかどうかはわかりません。テンプレートのコードは次のとおりです。

テンプレート内の{{test}}のような単純な処理を行っても、同じ種類の問題が発生します。静的なHTMLを使用すると、問題なく動作します。テンプレート内でこれを行うことができない場合は、どのように非静的HTMLを達成できますか？

Answer 1

もちろん、テンプレート内でVueを使用することもできます。

エラーは、dataプロパティを間違って設定したために発生しています。子のlistコンポーネントにアクセスしようとしているときに、listとtestを親コンポーネントに設定しています。これは、Vueがコンポーネントをレンダリングしようとしている間にエラーを生成するため、コンポーネントはまったくレンダリングされません。ただ、次のおlistコンポーネントを変更する修正するには

：

const list = { 
    data() { 
    return { 
     list: [], 
     test: "Now you should see me :)" 
    } 
    }, 
    template: '<table><tr v-for="item in list"><td><router-link v-on:click.native="doSomething" v-bind:to="\'/item/\' + item.id">{{ item.title }}</router-link></td></tr></table>' 
} 

また、あなたがそれらを使用しているコンポーネントにあなたの方法を移動する必要があります。