单个复选框与之交互后,无法取消选中/选中标头复选框时的选中复选框-Vuejs [英] Not able to uncheck/check chekboxes on uncheck/check of header checkbox after individual checkboxes are interacted with - Vuejs
问题描述
情况1 -我选中了我的各个复选框,而我的标题复选框也被选中.这是方法1,效果很好.
相同的代码
index.vue
< VCheckbox已检查= {this.checkSelections [idx]}nativeOnChange = {e =>{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
Mounted(){$ .nextTick(()=> {this.$ root.$ on("checkmarkHead",({allSelected})=> {console.log("checkmarkHead",allSelected);this.allSelected = allSelected;});}},
情况2-
我选中了我的标题复选框,并且选中了我所有的复选框.反之亦然.因此与此相对应的方法2也可以正常工作.
相同的代码-
Head.vue
< HeadItem>< VCheckbox已选中= {this.allSelected}nativeOnChange = {e =>{this.allSelected = e.target.checked;this.$ root.$ emit("selectAll",{allSelected:this.allSelected});}}/></HeadItem>
index.vue
mount(){$ .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屋!