我在v-for循环中渲染子组件,但一次只显示一个。我假设Vue将为每个渲染创建一个单独的/新的子组件。
但这似乎使用的是同一实例,因为即使更改后,子组件中的数据值仍然存在。
现在,我正在创建一个观察程序,以在问题更改时手动重置数据值。
这是预期的行为吗?
// Parent Component
<AnswerQuestion
v-for = "question in questions"
v-bind:question = "question"
v-if = "question.id == currentVisibleIndex"
v-on:questionAnswered = "questionAnswered"
>
</AnswerQuestion>
// Child Component
props: ["question"],
data() {
return {
options: options,
commentText: null
}
}
// what i am doing now, feels hacky
watch: {
question: function (newQuestion) {
this.selectedOption = null
this.commentText = null
}
},
是的,期望重用组件和元素,这样对性能更好。
要强制Vue创建新实例,请为key
属性使用唯一值,例如问题ID:
v-bind:key="question.id"
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句