javascript - 關於vue全選功能的問題

需求：
點擊家具，家電等子選單，它裡面的小選單也會全選，小選單少選一個就會取消其父選單的全選行為
現在的功能做到的是主體全選和子選單的關係，請問子選單和它的小選單要實現這種功能要怎麼做？
文字表達得不是很清晰，我直接上程式碼吧
https://jsfiddle.net/nj8u0nLo/1/

<p id="app">
  <p>{{a}}</p>
  <ul>
    <li>
    <p><input type="checkbox" v-model="selectAll">全选</p>
    <dl v-for="v in list">
      <dt><input type="checkbox" :value="v.id" v-model="selected">{{v.name}}</dt>
      <dd v-for="n in v.sort"><input type="checkbox" :value="n.id">{{n.name}}</dd>
    </dl>
    </li>
  </ul>
</p>

new Vue ({
    el: '#app',
  data: {
    list: [
      {'id': 1,'name':'家具','sort':[{'id':11,'name':'沙发'}, {'id':12,'name':'凳子'}, {'id':13,'name':'桌子'}]},              {'id': 2,'name':'家电','sort':[{'id':21,'name':'冰箱'}, {'id':22,'name':'电视'}, {'id':23,'name':'风扇'}]},
      {'id': 3,'name':'衣物','sort':[{'id':31,'name':'裤子'}, {'id':32,'name':'衬衫'}, {'id':33,'name':'鞋子'}]}
    ],
    selected: []
  },
  computed: {
      selectAll: {
        get: function(){
          return this.list ? this.selected.length == this.list.length:false
      },
      set: function(value){
          let selected=[]
        if(value){
                    for(let i=0;i<this.list.length;i++){
              selected.push(this.list[i].id)
          }
          this.selected=selected
        }
      }
    }
  },
  created() {
      for(let i=0;i<this.list.length;i++){
      this.selected.push(this.list[i].id)
    }
  }
})

#全選是綁定一個boolean值的，但是子選單綁定是是一個數組，請問這種情況怎麼處理？或是有沒有案例讓我參考一下呢~虛心求教啊~！！

黄舟2755 天前1139

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script> </head> <body> <p id="app"> <p> <label> <input type="checkbox" v-model="selectAll" @click="all">全选</label> </p> <dl v-for="(item,index) in list" v-key="item.id"> <dt> <label> <input type="checkbox" :value="item.id" v-model="item.all" @change="sl(index)">{{item.name}}</label> </dt> <dd v-for="(subItem,idx) in item.sort" v-key="subItem.id" @change="ssl(index)"> <label> <input type="checkbox" v-model="subItem.all" :value="subItem.id">{{subItem.name}}</label> </dd> </dl> </p> <script> var vm = new Vue({ el: "#app", data: { selectAll: false, list: [{ id: 1, name: '家具', sort: [{ id: 11, name: '沙发', all: false }, { id: 12, name: '凳子', all: false }, { id: 13, name: '桌子', all: false }], all: false }, { id: 2, name: '家电', sort: [{ id: 21, name: '冰箱', all: false }, { id: 22, name: '电视', all: false }, { id: 23, name: '风扇', all: false }], all: false }, { id: 3, name: '衣物', sort: [{ id: 31, name: '裤子', all: false }, { id: 32, name: '衬衫', all: false }, { id: 33, name: '鞋子', all: false }], all: false }], }, methods: { sl: function(e) { this.selectAll = this.list.every((item, index) => (item.all)); this.list[e].sort.forEach((v, i) => { v.all = this.list[e].all; }); }, ssl: function(e) { this.list[e].all = this.list[e].sort.every((item, index) => (item.all)) this.selectAll = this.list.every((item, index) => (item.all)) }, all: function() { this.list.forEach((item, index) => { item.all = this.selectAll; item.sort.forEach((v, i) => { v.all = this.selectAll; }) }) } } }) </script> </body> </html>

javascript - 關於vue全選功能的問題

全部回覆(2)我來回復