Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
javascript – Fragen zur Funktion „Alle auswählen' von vue
黄舟
黄舟 2017-06-12 09:27:49
0
2
1132

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~! !

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

Antworte allen(2)
左手右手慢动作
左手右手慢动作2017-06-12 09:29:49 2 Etage

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

Wie +0
Antwort hinzufügen
大家讲道理
大家讲道理2017-06-12 09:29:49 1 Etage

写了了很烂的版本，肯对你是否要帮助

<!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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage