Vuejs 复选框 child 状态未更新

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>

点击右侧的加号按钮-->点击下拉列表中的某项-->显示新标签

所以，这里，这些选项卡中出现了魔法：复选框无法正常工作，我的意思是在单击 "Select All" 复选框时，所有复选框都应该 selected，但这不是在单击一个子类别复选框（如第三个 child）之前不会发生，但是存储 selected 复选框的列表已填充。

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

我试图在这个 fiddle Here.

中复制它

Answer 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>

此元素同时定义了 :checked 和 v-model，它们将相互竞争，但更重要的是，您在静态数据上使用模型（更新 searchList，而不是 checkAll）。对于元素-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
  },

Answer 2

<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)" 绑定，成功了。

只需将其添加到 child

     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

Vuejs 复选框 child 状态未更新

Vuejs checkbox child state not updating

checkbox

vuejs2

element-ui