1 回答

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
除非您像這樣定義數(shù)據(jù),否則它會(huì)起作用:
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在您定義 時(shí)不可訪問componentData。使用計(jì)算來維持反應(yīng)性:
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 },
]
}
}
});
編輯:這是一個(gè)演示
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>
添加回答
舉報(bào)