Vue.js 当一次只显示一个组件时，Vue似乎正在重用子组件

我在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
    }
  },  

//父组件
//子组件
道具：[“问题”]，
数据（）{
返回{
选项：选项，
commentText:空
}
}
//我现在所做的，感觉很烦人
观察：{
问题：功能（新问题）{
this.selectedOption=null
this.commentText=null
}
},  

尝试使用v-show而不是v-if:

v-show=“question.id===currentVisibleIndex”

（三重等于更好）

v-if

将仅在满足该条件时渲染，

v-show

将渲染所有

Answer

组件，但仅显示带有

currentVisibleIndex

的组件

---

您可以在

数据

中移动

this.selectedOption=null

（实际上是selectedOption），这意味着将用null初始化。另一个选项是使用as-prop并将默认返回设置为null。

是的，重用组件和元素是预期的，这对性能更好

要强制Vue创建新实例，请为

键

属性使用唯一值，例如问题id:

v-bind:key="question.id"

---

“问题”是子组件中的道具吗？因为如果不是，我不认为你在告诉孩子问题是什么。是的。它工作得很好，让我困惑的是对象重用。我认为您应该提供更多关于组件的代码，因为“选项”数据不是由任何东西提供的，它也没有绑定到question属性。