Voraussetzung: Klicken Sie auf die Untermenüs Möbel, Haushaltsgeräte und andere. Durch die Auswahl eines Elements weniger im kleinen Menü wird das Allauswahlverhalten des übergeordneten Menüs aufgehoben die Beziehung zwischen der Hauptauswahl und dem Untermenü. Bitte sagen Sie mir, wie ich diese Funktion für das Untermenü und sein kleines Menü implementieren kann. Worte können es nicht gut ausdrücken...

直接在html里面操作就行了,用:checked属性操作

javascript – Fragen zur Funktion „Alle auswählen“ von vue

Anforderungen:
Klicken Sie auf die Untermenüs „Möbel“, „Haushaltsgeräte“ usw., und alle darin enthaltenen kleinen Menüs werden ausgewählt. Durch die Auswahl eines Elements weniger im kleinen Menü wird das „All-Select“-Verhalten des übergeordneten Menüs aufgehoben Die aktuelle Funktion besteht darin, alle Hauptelemente und Untermenüs auszuwählen. Wie wird diese Funktion in der Beziehung zwischen dem Untermenü und seinem kleinen Menü implementiert?
Der Text ist nicht sehr klar, ich gehe direkt zum Code
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)
    }
  }
})

Alle auswählen ist an einen booleschen Wert gebunden, das Untermenü ist jedoch an ein Array gebunden. Wie gehe ich mit dieser Situation um? Oder gibt es einen Fall, auf den ich mich beziehen kann? Ich bitte demütig um Rat~! !

黄舟2755 Tage vor1137

<!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 – Fragen zur Funktion „Alle auswählen“ von vue

Antworte allen(2)Ich werde antworten