تحقيق خاصية اختيار الكل والتحذير من المزيد باستخدام vue.js

كود 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">حذف</button>{{selectArr}} 
<label> 
<input type="checkbox" class="checkbox" @click="selectAll" />اختيار جميعها 
</label> 
</div> 
</template>

script جزء:

<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 { //تحقيق Select All
        _this.selectArr = [];
        _this.proData.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
      }
    }
  }
}
</script>

ما ذكرته أعلاه هو ما قدمه المحرر لكم لتحقيق功能 Select All وDelete Multiple باستخدام vue.js، آمل أن يكون مفيدًا لكم، إذا كان لديكم أي أسئلة، فلا تترددوا في ترك تعليق، وسأقوم بالرد على رسائلكم في الوقت المناسب. شكرًا جزيلاً أيضًا للدعم الذي يقدمونه لموقع呐喊 لتعليم البرمجة!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، وله حقوق الملكية الأصلية للمالك، تم جمعه من قبل المستخدمين على الإنترنت من تلقاء نفسه، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت أي محتوى يشتبه في انتهاك حقوق النسخ، فمرحبًا بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال #بـ @ عند إرسال البريد الإلكتروني) لتقديم الشكوى، وتقديم الدليل ذات الصلة، إذا تم التحقق من ذلك، فإن هذا الموقع سيرحل على الفور عن المحتوى المزعوم بتعديك.