基于v-btn/v-icon的自定义Vue复选框值更新时视图不刷新如何解决

需修改的两处核心代码如下： #

1. 修复父组件数组修改的响应式问题

Vue 2 存在响应式限制，直接通过索引修改数组元素无法触发视图更新，需要用$set方法修改数组值，将父组件的boxValueChanged方法修改为：

boxValueChanged( index ) {
  console.log( "boxValueChanged", index, this.boxvalues[ index ] );
  // 用$set触发数组响应式更新
  this.$set(this.boxvalues, index, !this.boxvalues[ index ]);
  console.log( "boxValueChanged", index, this.boxvalues[ index ] );
}

2. 优化自定义组件冗余逻辑（可选，不修改也可正常运行，更符合自定义组件规范）

你的mybox组件内部的selected变量属于冗余状态，不需要额外维护，直接基于传入的value prop 处理逻辑即可，修改后的组件代码：

Vue.component('mybox', {
  props: ['value'],
  template: `
      <v-btn @click="clicked()" icon dense>
        <v-icon color="#f9a602">{{ value ? 'check_box' : 'check_box_outline_blank' }}</v-icon>
      </v-btn>
  `,
  methods: {
    clicked() {
      this.$emit( "input", !this.value );
    }
  }
});

问题根因说明 #

你之前判断的取值方法不具备响应性是错误的，只要父组件数据能触发响应式更新，boxValue(index)方法的返回值会自动同步更新，子组件拿到的value prop 也会更新，视图自然会同步变化。你之前的问题完全是因为直接修改数组索引没有触发Vue2的响应式更新导致的，原有HTML代码无需修改。

内容的提问来源于stack exchange，提问作者James Hudson