Question

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

Answer 1

是的，重复使用组件和元素，这对性能更好。

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

v-bind:key="question.id"

Answer 2

尝试使用v-show代替v-if：v-show= "question.id === currentVisibleIndex"（三等于更好）。

v-if仅在满足该条件时才会呈现，v-show将呈现所有Answer个组件，但只显示currentVisibleIndex的组件。

您可以在this.selectedOption = null内移动data（selectOption，实际上），这意味着将使用null初始化。另一种选择是使用prop作为prop并将默认返回值设置为null。

Vue似乎在重复使用子组件时，一次只显示一个

2 个答案: