vue selectall复选框不确定绑定

Question

我有这样的表，我想做的是应用indeterminate.prop，因此，如果选择了全部，则检查复选框，如果检查了1个复选框：indeterminate.prop 我想申请。我该如何写这个？我无法写下条件。

坦率地说，无法用VUE JS编写简单简单的条件使我有些紧张。

Stackoverflow要求提供很多细节，但我不知道该写什么

new Vue({
  el: "#app",
  data: {
    selected: [],
    messages: [{
        id: 1,
        text: "Learn JavaScript",
        status: 'read'
      },
      {
        id: 2,
        text: "Learn Vue",
        status: 'unread'
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        status: 'read'
      },
      {
        id: 4,
        text: "Build something awesome",
        status: 'unread'
      }
    ]
  },
  computed: {

    selectAll: {
      get: function() {
        return this.messages ? this.selected.length == this.messages.length : false;
      },
      set: function(value) {
        var selected = [];
        if (value) {
          this.messages.forEach(function(item) {
            selected.push(item.id);
          });
        }
        this.selected = selected;
      }
    }
  },
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <table class="table">
    <a href="javascript:void(0);" v-model="selectAll" class="deleteMessages">All,</a>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>Status</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in messages">
        <td><input type="checkbox" v-model="selected" :value="item.id"></td>
        <td>{{ item.status }}</td>
        <td>{{ item.text }}</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

要选择并取消选择所有复选框，您需要正确删除该计算的该复选框，并添加单击事件，该事件所有ID，或从所选的所有ID中删除所有ID。

new Vue({
  el: "#app",
  data: {
    selected: [],
    messages: [{
        id: 1,
        text: "Learn JavaScript",
        status: 'read'
      },
      {
        id: 2,
        text: "Learn Vue",
        status: 'unread'
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        status: 'read'
      },
      {
        id: 4,
        text: "Build something awesome",
        status: 'unread'
      }
    ]
  },
  methods: {
  selectAll(){
  if(this.selected.length !== this.messages.length){
this.selected = this.messages.map(e=>e.id)
  
  }else {
   this.selected = []
  }
}

}

 
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">

<h1>Selected ids: {{ selected }}</h1>
 <button @click="selectAll">{{selected.length === messages.length ?'Unselect all' : 'Select All' }}</button>
  <table class="table">
   
    <thead>
      <tr>
        <th>Status</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in messages">
        <td><input type="checkbox" v-model="selected" :value="item.id"></td>
        <td>{{ item.status }}</td>
        <td>{{ item.text }}</td>
      </tr>
    </tbody>
  </table>

</div>