与单个复选框交互后，无法在取消选中/选中标题复选框时取消选中/选中复选框 - Vuejs

Question

情况 1 - 我检查了我的个人复选框，我的标题复选框被选中。这是方法 1，效果很好。

相同的代码

index.vue

<VCheckbox
 checked={this.checkSelections[idx]}
    nativeOnChange={e => {

    this.$set(this.checkSelections, idx, e.target.checked);
    let allSelected = true;
    for (let i = 0; i < this.checkSelections.length; i++) {
        allSelected = this.checkSelections[i];
        if (!allSelected) break;
    }
    this.$root.$emit("checkmarkHead", { allSelected });
    }}
/>

Head.vue

  mounted() {
    this.$nextTick(() => {
        this.$root.$on("checkmarkHead", ({ allSelected }) => {
        console.log("checkmarkHead", allSelected);
         this.allSelected = allSelected;
      });
    }

  },

情况 2 -

我检查了我的标题复选框，并且我的所有复选框都被选中了。反之亦然。所以与此对应的方法2也可以正常工作。

相同的代码 -

Head.vue

  <HeadItem>
    <VCheckbox
        checked={this.allSelected}
        nativeOnChange={e => {
        this.allSelected = e.target.checked;
        this.$root.$emit("selectAll", {
            allSelected: this.allSelected
        });
        }}
    />
</HeadItem>

index.vue

mounted() {
   this.$nextTick(() => {
        this.$root.$on("selectAll", ({ allSelected }) => {
        this.checkSelections = Array(this.sortedData.length).fill(allSelected);
     });
   });
 }

问题 - 当我在情况 1 之后执行情况 2 时，相同的方法无法按预期工作。视图未更新。同样，在情况 2 之后执行情况 1 也不起作用。

这里是链接

代码链接 - https://codesandbox.io/s/vmwy3v4203

在处理了所有突变警告等之后，我现在一无所知。

Answer 1

我欠你一个道歉。这确实是另一个反应性问题，可以通过提供 key attribute 来解决。..

key 特殊属性主要用作 Vue 的提示 虚拟 DOM 算法在区分新列表时识别 VNode 对旧列表的节点。没有键，Vue 使用一种算法 最小化元素移动并尝试修补/重用 尽可能在原地使用相同的类型。使用键，它将重新排序 基于键的顺序变化的元素，以及带有键的元素 不再存在的将始终被删除/销毁。

您可以为元素分配唯一的key 值，如果更改将强制 Vue 重新渲染该元素。在您的情况下，您可以将键分配给您的 VCheckbox 元素等于它们的 checked 值，强制 Vue 在它们被选中/取消选中时重新渲染它们。例如..

<HeadItem>
  <VCheckbox
    key={this.allSelected}
    checked={this.allSelected}
    nativeOnChange={e => {
      this.$emit('change', !this.allSelected)
    }}
  />
</HeadItem>

我冒昧地将您的 allSelected 属性重写为计算属性，并删除了您在根实例上设置的事件侦听器。我认为这样更干净..