处理VueJS中的复选框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了处理VueJS中的复选框相关的知识，希望对你有一定的参考价值。
我过去一直在使用jQuery，现在我切换到Vuejs。我无法在Vuejs找到这些问题的解决方案，我是vuejs的新手。
- 我在表格中有一系列复选框。我添加了一个片段，用
shift + click选择多个复选框。通过这种方式，我可以一次选择多个复选框。$chkboxes = $('.chkbox') lastChecked = null $chkboxes.click (e) -> if !lastChecked lastChecked = this return if e.shiftKey start = $chkboxes.index(this) end = $chkboxes.index(lastChecked) $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop 'checked', lastChecked.checked lastChecked = this return - 点击我可以从我添加的复选框中获取值作为数据attrs
$("#cameras_datatables tbody input[type='checkbox']:checked").each (index, control) -> camera_id = $(control).attr("data-val-id") api_id = $(control).attr("data-val-api-id") api_key = $(control).attr("data-val-api_key") row = $(this).parents('tr')
现在我有一个按钮，如
<button v-on:click="onModifyClick" class="clear-btn-f" id="btn-modify">Modify</button>
和方法
onModifyClick () {
console.log("testing");
this.$notify({
group: "admins",
title: "Please",
type: "error",
text: "At least select one user!",
});
}
在修改单击我想要获取在页面上检查的所有复选框..然后我想得到我作为attrs添加的值
<input type="checkbox" data-val="11172" data-val-username="junaid@evercam.io" data-val-api-id="dddd" data-val-api_key="dddd">
我想遍历所有选中的复选框并获取这些数据，
这更像是一个信息问题，因为我已搜索但无法找到任何有关此问题的解决方案。
更新：
我正在使用Vuetable，我通过回调中的Vuetable加载获得所有这些值formatter
export default [
{
title: ``,
formatter: (value) => {
return "<input type='checkbox' data-val='" + value.id + "' data-val-username='" + value.username + "' data-val-api-id='" + value.api_id + "' data-val-api_key='" + value.api_key + "'>";
},
titleClass: "user-checkbox"
}
]
现在，我看不出来。做你想建议把它放到数据中，让Vue通过模板将它附加到dom。而数据已经通过Vuetable绑定到Dom。
在那之后我才有这个
对于新的SPA框架用户来说，这是非常常见的，你正是这样做的。你需要摆脱使用Vue时直接触摸DOM的习惯 - 而不是考虑“我有这些复选框，我需要读取它们的值”它应该是“我有这些状态变量在我的组件中，vue会自动在DOM中反映这些值。“操纵组件data并让Vue担心DOM。
因此，例如，不是使用jQuery在DOM中搜索复选框元素并读取/写入其属性，而是使用Vue存储这些值并让其模板将它们绘制到DOM中，如下面的简化示例所示：
new Vue({
el: '#app',
data: {
myCheckboxes: [{
val: 11172,
username: 'junaid@evercam.io',
apiId: 'dddd',
apiKey: 'xxxx',
checked: false
},
{
val: 123,
username: 'foo@example.com',
apiId: 'dddd',
apiKey: 'xxxx',
checked: true
},
{
val: 456,
username: 'bar@example.com',
apiId: 'dddd',
apiKey: 'xxxx',
checked: true
}
]
},
methods: {
onModifyClick() {
// Examine the data, not the DOM:
var ret = this.myCheckboxes.map(x => {
if (x.checked) return x.val
}).filter(x => {return x})
console.log("Values of checked items: ", ret)
}
}
});<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
<template v-for="box in myCheckboxes">
<input @change="onModifyClick()" type="checkbox" v-model="box.checked" :data-val="box.val" :data-val-username="box.username" :data-val-api-id="box.apiId" :data-val-api_key="box.apiKey"> {{box.username}}<br>
</template>
</div>你可以利用getAttribute元素函数，它返回作为参数传递的属性的值，所以我们添加change事件的方法处理程序，它将事件作为参数，我们可以访问表示当前元素的target属性（复选框输入）通过调用getAttribute方法如下：
new Vue({
el: '#app',
data: {
},
methods: {
onModifyClick(e) {
let t=e.target;
console.log(t.getAttribute('data-val'));
console.log(t.getAttribute('data-val-username'));
console.log(t.getAttribute('data-val-api-id'));
console.log(t.getAttribute('data-val-api_key'));
}
}
});<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
<input type="checkbox" data-val="11172" data-val-username="junaid@evercam.io" data-val-api-id="dddd" data-val-api_key="dddd" @change="onModifyClick" /> 1
<input type="checkbox" data-val="54545" data-val-username="brahim@evercam.io" data-val-api-id="eee" data-val-api_key="fdsdf" @change="onModifyClick" /> 2
</div>以上是关于处理VueJS中的复选框的主要内容，如果未能解决你的问题，请参考以下文章
未选中时，具有对象作为绑定到数组属性的值的 VueJS 复选框不会脱离数组