私のVue-Instanceからオブジェクトのリストをレンダリングしようとしています。各オブジェクトはコンポーネントを使用する必要があるので、コンポーネントをv-for-loopに配置します。しかし、私が得るのは、正しい値ではなくlist.title
とlist.text
です。VueJS - v-forの内部のコンポーネント
v-for-loopsでコンポーネントを使用する特別な方法はありますか?
私はこれを見つけましたが、それを使用する方法や正しい方法がわからない場合はthread in the Vue-Forumです。
アプリケーション:
<div id="app">
<div v-for="list in lists">
<listcard title="list.title" text="list.text"></listcard>
</div>
</div>
テンプレート:
<template id="listcard-template">
<div class="card">
<h2>{{ title }}</h2>
<p>{{ text }}</p>
</div>
</template>
マイコンポーネント:
Vue.component('listcard', {
template: '#listcard-template',
props: ['title', 'text']
})
ヴュー・インスタンス:
new Vue({
el: "#app",
data: {
lists: [
{title: "title1", text: "text1"},
{title: "title2", text: "text2"},
...
]
}
})
ありがとう!