vue.js - 如何使用 Vue.js 根据条件选择所有复选框
问题描述
我正在尝试根据某些条件选择复选框。
选择所有复选框(选择所有复选框)
选择所有未读(选择所有未读,其中数据数组的状态为未读)
选择所有读取(选择所有读取,其中数据数组具有读取状态)
我可以在复选框单击时选择所有复选框,但无法通过链接选择它
我还需要获取选定复选框的 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>
解决方案
你的 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>
推荐阅读
- python - 如何在简单的numpy数组上移动轴
- laravel - 如何在两个不同的路由组中使用相同的路由
- sql-server - SQL Server - MERGE : MATCHED 两次更新 - 基于同一表中第一次更新的记录的第二次更新
- python - Weasyprint/Cairo 在转换为 PDF 时会丢失 SVG 文本标签
- replication - 复制 ClickHouse 副本的最佳方法?
- powershell - Powershell:尝试将背景/前景颜色更改为文本输出(无写入主机)
- minecraft - 拿起_JAVA_OPTIONS。最大堆大小无效?
- algorithm - 我对2个二叉树之间的复杂性比较有点困惑,如果相同,下面是相同的代码
- java - 具有接口和验证器的泛型
- python - 有没有办法在 pandas 中创建代表三个数据帧的共享值的虚拟变量?