与单个复选框交互后，无法在取消选中/选中标题复选框时取消选中/选中复选框 - Vuejs [英] Not able to uncheck/check chekboxes on uncheck/check of header checkbox after individual checkboxes are interacted with - Vuejs

问题描述

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

相同的代码

index.vue

{this.$set(this.checkSelections, idx, e.target.checked);让 allSelected = true;for (让 i = 0; i < this.checkSelections.length; i++) {allSelected = this.checkSelections[i];如果 (!allSelected) 中断；}this.$root.$emit("checkmarkHead", { allSelected });}}/>

Head.vue

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

情况 2 -

我检查了我的标题复选框并且我的所有复选框都被选中.反之亦然.所以对应的方法2也可以.

相同的代码 -

Head.vue

 <V复选框选中={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 也不起作用.

这是到

的链接

代码链接 -

Situation 1 - I check my individual checkboxes, my header checkbox gets checked. This is method 1 and works fine.

Code for same

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;
      });
    }

  },

Situation 2 -

I check my header checkbox and all my checkboxes are checked. Vice-versa is true as well. So method 2 corresponding to this works fine too.

Code for same -

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);
     });
   });
 }

Problem - When I do situation 2 after Situation 1, the same methods don't work as expected. The view isn't updated. Similarly, executing Situation 1 after Situation 2 won't work either.

Here's the link to

Code Link - https://codesandbox.io/s/vmwy3v4203

I'm clueless now after handling all mutations caveats etc.

解决方案

I owe you an apology. This is indeed another reactivity issue which could be solved by providing a key attribute ..

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.

You can assign a unique key value to an element, which if changed will force Vue to re-render that element. In your case you can assign keys to your VCheckbox elements equal to their checked value, forcing Vue to re-render them when they're checked/unchecked. For example ..

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

I've taken the liberty to re-write your allSelected property as a computed property and removed the event listener you set up on the root instance. I think it's much cleaner this way ..

这篇关于与单个复选框交互后，无法在取消选中/选中标题复选框时取消选中/选中复选框 - Vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！