Question

我正在尝试根据某些条件选择复选框。

选中所有复选框（选中所有复选框）

选择所有未读（选择所有未读数据数组的状态）   未读）

选择所有读取（选择所有读取数据数组具有读取状态的位置）

我可以选中复选框上的所有复选框，但无法通过链接选择它

我还需要获取所选复选框的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: {

  },
  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/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <h2>Message App:</h2>

  <table class="table">
    <a href="javascript:void(0);" v-model="selectAll" class="deleteMessages">All,</a>
    <a href="javascript:void(0);">Read,</a>
    <a href="javascript:void(0);">Unread,</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

您可能希望在元素上使用click事件：

<a href="javascript:void(0);" @click="selectAllHandler" class="deleteMessages">All,</a>

并在javascript代码中：

methods: {
   selectAllHandler() {
     if (this.selected.length) {
       this.selected = []
     } else {
       this.selected = this.messages.map(item => item.id);
     }
   }

}

Answer 2

您的Javascript：

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() {
      this.selected = this.messages.map((message) => message.id); 
  }
}
})

您的HTML：

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

<div id="app">
  <h2>Message App:</h2>
  <table class="table">
<a href="javascript:void(0);" @click.prevent="selectAll" class="deleteMessages">All,</a>
<a href="javascript:void(0);">Read,</a>
<a href="javascript:void(0);">Unread,</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>

如何根据Vue.js

2 个答案: