Implementazione della funzione di selezione di tutti e di eliminazione multipla di checkbox con vue.js

codice template:

<template> 
<div class="hello"> 
<ul> <li v-for="(item, index) in proData"> 
<label for=""> 
<input type="checkbox" :value="index" v-model="selectArr"> 
</label>{{item.name}} 
</li>： 
</ul> 
<button type="" @click="del">Elimina</button>{{selectArr}} 
<label> 
<input type="checkbox" class="checkbox" @click="selectAll" />Seleziona tutto 
</label> 
</div> 
</template>

script parte:

<script>
var proData = [{
  "name": "j1ax"
}, {
  "name": "j2ax"
}, {
  "name": "j3ax"
}, {
  "name": "j4ax"
}]
export default {
  name: 'hello',
  data() {
    return {
      proData: proData,
      selectArr: []
    }
  },
  created() {
    this.$http.get('/api/home').then(function(response) {
      response = response.body;
      this.proData = response.data;
    })
  },
  methods: {
    del() {
      let arr = [];
      var len = this.proData.length;
      for (var i = 0; i < len; i++) {
        if (this.selectArr.indexOf(i) >= 0) {
          console.log(this.selectArr.indexOf(i));
        } else {
          arr.push(proData[i]);
        }
      }
      this.proData = arr;
      this.selectArr = [];
    },
    selectAll(event) {
      var _this = this;
      console.log(event.currentTarget)
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else { // Implement full selection
        _this.selectArr = [];
        _this.proData.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
      }
    }
  }
}
</script>

The above-mentioned is the introduction given by the editor to everyone about the implementation of the checkbox full selection and multiple deletion function using vue.js, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my heartfelt gratitude to everyone for supporting the Yell Tutorial website!

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, does not edit manually, nor does it assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) to report, and provide relevant evidence. Once confirmed, this site will immediately delete the suspected infringing content.