javascript - Vue 子组件不会因 Prop 更改而更新

Question

我正在更新一个“exercise” Prop ，该 Prop 会发送到 Vue 中的“workout”组件。在子组件中，我发出一个函数来增加您所在的集合。该函数在父组件中触发(我得到 console.logs())，但子组件没有重新渲染。

家长:

<ExerciseListItem
  v-for="(exercise) in exercises"
  v-on:completeSet="completeSet"
  v-on:selectExercise="selectExercise"
  v-bind:exercise.sync="exercise"
  v-bind:isActiveExercise="exercise.slug === activeExerciseSlug"
  v-bind:key="exercise.slug"
/>

方法:

methods: {
  completeSet: function(slug) {
    console.log("complete-set", slug);
    const exercise = this.getExerciseBySlug(slug);
    exercise.completedSets++;
    if (exercise.completedSets === exercise.totalSets) {
      this.completeExercise(slug);
    }
  },
  completeExercise: function(slug) {
    this.getExerciseBySlug(slug).isComplete = true;
    console.log("COMPLETE-exercise", slug);
  },
  getExerciseBySlug: function(slug) {
    return this.exercises.find(exercise => exercise.slug === slug);
  },
  selectExercise: function(selectedSlug) {
    this.activeExerciseSlug = selectedSlug;
  }
},

子模板

<li
  v-bind:class="{ 'white-box': true, complete: exercise.isComplete }"
  v-on:click="exercise.totalSets > 1 ? $emit('selectExercise', exercise.slug) : $emit('completeSet', exercise.slug)"
>

Here's the project on Github

And a live demo

感谢帮助😊

Answer 1

该组件未更新，因为 prop 的嵌套值不是响应式的，因此，vue 不会注意到它们正在发生变化。

如何在 Vue 中使嵌套属性响应式

以下内容适用于您的 vue 应用程序中的所有状态 - 无论它是否位于 vuex 商店中，您的 data()选项，或在 prop 内.

默认情况下，vue 仅在声明时才使状态响应。这意味着动态(在运行时)分配的状态不是 react 性的(例如 mounted() { this.bar = 'two' } 不会在 bar 中创建 react 性属性 data() )。

如果您想动态创建响应式状态，则需要遵循两个规则:

1. 所有属性都需要用 Vue.set(rootObject, key, value) 设置(例如 mounted() { this.$set(this, 'bar', 'two') } - this.$set() 是 Vue.set() 的别名)。在这里阅读:Vue Doku

2. 数组需要填充 native 数组属性( Array.prototype.push() 等)。按索引设置数组元素不会使这些元素具有反应性。 注意: Vue.set(rootArray, 1, value)也不起作用 - 因为它通过索引设置元素。在这里阅读更多相关信息:Vue Gotchas