Vuejs复选框子状态未更新

Question

我是 Vue.js 的初学者，但我陷入了困境：

<span>Condition</span>
<el-select style="width: 94%;" v-model="condition[index+1]">
  <el-option label="Ambient" value="Ambient">Ambient</el-option>
  <el-option label="Frozen" value="Frozen">Frozen</el-option>
</el-select>
<h4>
  <el-checkbox v-model="check[index+1]" @change="selectAllPanels(index+1, item.id)">Select All</el-checkbox>
</h4>
<div class="card-content panels-category" v-for="(category, n) in panelsCategory[item.id]" :key="category.id" style="float: left">
  <div class="panel-category" v-if="searchList[item.id][n].length > 0">
    <el-checkbox v-model="checkAll[index+1][item.id][n]" @change="checkAllPanel(index+1, item.id, n)"  :label="category.id" :key="category.id">
      <h5 class="card-title">{{ category[0].panel_category }}</h5>
    </el-checkbox>
  </div>
  <div class="panels" v-for="panels in searchList[item.id][n]" :key="panels.id">     <!-- in panelsCategory[item.id][n]-->
    <!--<el-checkbox-group class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample(index+1)">-->
      <el-checkbox :checked="checkAll[index+1][item.id][n]" class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample()" :label="panels.id" :key="panels.id" >{{panels.reportable_name}}</el-checkbox>
      <el-popover class="panel-popover"
                  trigger="hover"
                  @show="getPanelTest(panels.id)"
                  placement="bottom">
        <el-button slot="reference" class="ti-help popover-help"></el-button>
        <slot>{{panelTest}}</slot>
      </el-popover>
    <!--</el-checkbox-group>-->
  </div>
  <div class="panels" v-if="searchList[item.id][n].length > 0" v-for="i in getPanelsLength(index+1, item.id, n)" ></div>
</div>

单击右侧的加号按钮-->从下拉列表中单击某物-->它显示新标签

所以，在这些选项卡中，神奇之处在于：复选框无法正常工作，我的意思是在单击“全选”复选框时，应选中所有复选框，但在单击一个子类别复选框之前不会发生这种情况（就像第三个孩子一样），但是存储所选复选框的列表填充得很好。

我尝试了this.$forceUpdate() 甚至this.$set() 在单击全选和类别标题时调用的函数（那些有蓝色背景的） 有人可以帮忙吗？

我试图在这个小提琴Here中重现它。

Answer 1

<el-checkbox class="panels-name" 
  :value="!!selectedPanels[index+1][item.id].find(i=>i===panels.id)"
  @change="handelAddSample(index+1,item.id,panels.id)"
  :label="panels.id"
  :key="panels.id"
>{{panels.reportable_name}}
</el-checkbox>

通过:value="!!selectedPanels[index+1][item.id].find(i=>i===panels.id)"绑定，成功了。

只需将其添加到孩子

     handelAddSample(a,b,id) {
        let m = -1;
        if(!!this.selectedPanels[a][b].find((i,index)=>{if(i===id){m=index;return true}})){
            this.selectedPanels[a][b].splice(m,1); 
        }else {
            this.selectedPanels[a][b].push(id);
        }
        this.$forceUpdate()
      },

new demo

Answer 2

问题似乎与复选框有关

<el-checkbox
  :checked="checkAll[index+1][item.id][n]"
  class="panels-name"
  v-model="selectedPanels[index+1][item.id]"
  @change="handelAddSample()"
  :label="panels.id" :key="panels.id"
>{{panels.reportable_name}}</el-checkbox>

这个元素同时定义了:checked 和v-model，它们将竞争，但更重要的是，您在静态数据上使用模型（更新searchList，而不是checkAll）。对于 element-ui，您只使用 v-model，并传递 checkAll 而不是 searchList。

<el-checkbox
  v-model="checkAll[index+1][item.id][n]"
  class="panels-name"
  @change="handelAddSample()"
  :label="panels.id" :key="panels.id"
>{{panels.reportable_name}}</el-checkbox>

您应该做的另一件事是在更新嵌套属性时使用 this.$set

  selectAllPanels(index, item) {
    if (this.check[index] === true) {
      this.$set(this.check, index, true) // <--- note use of $set here
    } else {
      this.$set(this.check, index, false) // <--- here
    }
    for (let i = 0; i <= this.panelsCategory[item].length; i++) {
        console.log(this.panelsCategory[item][i])
      if (this.panelsCategory[item][i] !== undefined && this.check[index]) {
        this.$set(this.checkAll[index][item], i, true) // <--- here
        this.checkAllPanel(index, item, i)
      } else {
        if (this.panelsCategory[item][i] !== undefined) {
          this.$set(this.checkAll[index][item], i, false) // <--- and here
          this.checkAllPanel(index, item, i)
        }
      }
    }
    //this.$forceUpdate()  // <--- then you don't need forceUpdate
  },