当一次仅显示一个时,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
    }
  },  
莱纳斯·伯格

是的,期望重用组件和元素,这样对性能更好。

要强制Vue创建新实例,请为key属性使用唯一值,例如问题ID:

v-bind:key="question.id"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章