主页 / 问题 / 992684
Accepted
Виктор Тюрин
Asked:2020-06-14 17:19:51 +0000 UTC2020-06-14 17:19:51 +0000 UTC

在 vuejs 条件下添加选中的属性

  • 772

有这样一个问题，有一个树复选框 - s （假设有 3 个）。您需要这样做，以便当您单击一个复选框时，其他两个也有一个复选标记（也就是说，它也被选中）并且当您从父级删除这两个复选框时，复选标记被删除。

vue.js

1 个回答

  1. Best Answer

    var app = new Vue({
  el: '#app',
  data: {
    items: [ "Apple", "Google", "Microsoft" ],
    companies: [],
    checkedAll: false
  },
  methods: {
    checkAll: function() {
      this.companies = [];
      
      if (!this.checkedAll) {
        for (let key in this.items) {
          this.companies.push(this.items[key]);
        }
      }
    },
    checkUpdate: function() {
      if (this.companies.length === this.items.length) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    }
  }
});
    ul {
  list-style-type: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="checkbox" v-on:click="checkAll()" v-model="checkedAll">Выбрать все
  <ul>
    <li v-for="item in items">
      <input type="checkbox" v-bind:value='item' v-model="companies" v-on:change="checkUpdate()">{{ item }}
    </li>
  </ul>
  <span>Выбрано: {{ companies }}</span>
</div>

    • 0

相关问题