除非您像這樣定義數據，否則它會起作用：
data() {
return {
cars: [ ... ],
persons: [ ... ],
componentData: [
{ name: TestPane, props: { data: this.cars }, id: 1 },
{ name: TestPane, props: { data: this.persons }, id: 2 },
]
}
}
this.cars并且this.persons在您定義 時不可訪問componentData。使用計算來維持反應性：
new Vue({
el: "#app",
data() {
return {
cars: [ ... ],
persons: [ ... ]
}
},
computed: {
componentData() {
return [
{ name: TestPane, props: { data: this.cars }, id: 1 },
{ name: TestPane, props: { data: this.persons }, id: 2 },
]
}
}
});
編輯：這是一個演示
const TestPane = {
template: `
<div class="pane">
{{ data }}
</div>
`,
props: ['data']
}
/***** APP *****/
new Vue({
el: "#app",
data() {
return {
cars: ['honda', 'ferrari'],
persons: ['Bob', 'Mary']
}
},
computed: {
componentData() {
return [
{ name: TestPane, props: { data: this.cars }, id: 1 },
{ name: TestPane, props: { data: this.persons }, id: 2 },
]
}
}
});
.pane {
padding: 12px;
background: #dddddd;
margin: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="component in componentData" :key="component.id">
<component v-bind:is="component.name" v-bind="component.props">
</component>
</div>
</div>
