vue-通过组件数组添加时不响应的属性

Question

嘿，我的代码看起来像这样：

componentData: [
{ name: TestPane, props: { data: this.cars }, id: 1 },
{ name: TestPane, props: { data: this.persons }, id: 2 },
]

<div v-for="component in componentData" :key="component.id">
<component v-bind:is="component.name" v-bind="component.props">
</component>
</div>

道具不是被动的。当我在没有:data=cars循环的情况下正常通过道具时，它们是被动的。但我需要在我的项目中循环传递它们。有什么想法吗？

Answer 1

除非你定义了这样的数据，否则它会起作用：

data() {
return {
cars: [ ... ],
persons: [ ... ],
componentData: [
{ name: TestPane, props: { data: this.cars }, id: 1 },
{ name: TestPane, props: { data: this.persons }, id: 2 },
]
}
}

定义componentData时，this.cars和this.persons不可访问。使用计算来维持反应性：

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>