Vue.js子组件更新Prop的selected属性后未重新渲染问题求助

这个问题的核心是Vue的响应式系统对对象属性变更的检测限制——当你直接修改对象上未被Vue追踪的属性（或新增属性）时，Vue无法自动触发视图更新。你在Vue DevTools里看到数据已变更但视图没同步，就是因为这个机制导致的。

原因拆解 #

你修改answer.title时视图能正常更新，是因为title是answer对象初始就存在的属性，Vue在组件初始化阶段已经为它添加了响应式的getter/setter；而selected要么是你后续新增的属性，要么修改时没有通过Vue的响应式机制触发更新，导致子组件的类绑定没感知到变化。

解决方案 #

下面是几种可行的修复方式，按推荐程度排序：

1. 使用this.$set触发响应式更新

在父组件的事件处理中，不要直接赋值answer.selected，而是用this.$set（组件实例内的便捷方法，等价于全局的Vue.set）来修改属性，强制Vue触发响应式更新：

export default {
  props: ['question'],
  components: {QuizAnswer},
  created: function () {
    this.$on('answer-selected', id => {
      const answerIndex = this.question.answers.findIndex(item => item.id === id);
      if (answerIndex !== -1) {
        const targetAnswer = this.question.answers[answerIndex];
        // 用this.$set修改属性，确保响应式系统感知到变化
        this.$set(targetAnswer, 'selected', !targetAnswer.selected);
      }
    });
  }
}

这里还把map.indexOf改成了findIndex，代码更简洁高效。

2. 提前初始化selected属性

如果后端返回的answers数组里没有selected字段，在父组件拿到数据后先统一初始化这个属性，让Vue在初始化阶段就把它纳入响应式追踪：

export default {
  props: ['question'],
  components: {QuizAnswer},
  created: function () {
    // 为所有answer初始化selected属性
    this.question.answers.forEach(answer => {
      if (typeof answer.selected === 'undefined') {
        answer.selected = false;
      }
    });

    this.$on('answer-selected', id => {
      const answerIndex = this.question.answers.findIndex(item => item.id === id);
      if (answerIndex !== -1) {
        this.question.answers[answerIndex].selected = !this.question.answers[answerIndex].selected;
      }
    });
  }
}

这种方式适用于你能提前确定需要selected属性的场景，后续直接修改就能触发更新。

3. 替换整个answer对象（或重新赋值数组）

Vue能检测到数组元素的替换或整个数组的重新赋值，所以你可以创建一个新的answer对象替换原有的，或者生成新的answers数组：

export default {
  props: ['question'],
  components: {QuizAnswer},
  created: function () {
    this.$on('answer-selected', id => {
      this.question.answers = this.question.answers.map(answer => {
        if (answer.id === id) {
          // 返回新对象，触发响应式更新
          return {...answer, selected: !answer.selected};
        }
        return answer;
      });
    });
  }
}

这种方式通过创建新对象触发更新，代码清晰，性能影响也可以忽略。

额外优化建议 #

子组件通过$parent.$emit触发事件的方式耦合性较强，推荐直接向父组件emit事件，父组件通过v-on接收：

• 子组件修改：

methods: {
  toggleSelect() {
    this.$emit('answer-selected', this.answer.id);
  }
}

• 父组件模板使用子组件时：

<quiz-answer v-for="answer in question.answers" :answer="answer" @answer-selected="handleAnswerSelected" />

• 父组件定义handleAnswerSelected方法处理事件，这样更符合Vue组件通信的规范，避免依赖$parent的耦合。

内容的提问来源于stack exchange，提问作者Riccardo Barbotti