与单个复选框交互后，无法取消选中/选中标题复选框的复选框。-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 ..

来解决。

  

xpath xpath 1 4444 Investigador 2 55555 Becario 特殊属性主要用作Vue的提示   虚拟DOM算法，用于在比较新列表时识别VNode   节点对照旧列表。没有密钥，Vue使用的算法   最小化元素移动并尝试修补/重用元素   尽可能就地使用相同类型。有了钥匙，它将重新排序   基于键顺序更改的元素，以及带有键的元素   不再存在的内容将始终被删除/破坏。

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

checked

我已自由地将<HeadItem> <VCheckbox key={this.allSelected} checked={this.allSelected} nativeOnChange={e => { this.$emit('change', !this.allSelected) }} /> </HeadItem> 属性重写为计算属性，并删除了您在根实例上设置的事件侦听器。我认为这样更干净..