javascript - Vue Js中的复选框数组
问题描述
我有一组复选框,来自存储所有系统设置的主系统对象。(称为 getSystem{})。
在这种形式中,我正在访问一个用户,该用户具有一组角色 []。如何对照 getSystem.user_roles 检查这个角色数组?
我知道如何正常进行,显然是在 javascript 中。但是我会明智地在复选框输入 Vue.js 中添加什么?
<b-form-group>
<label for="company">Email Address</label>
<b-form-input type="text" id="email" v-model="user.email" placeholder="Enter a valid e-mail"></b-form-input>
</b-form-group>
// Here i can do user.roles to get the array of roles.
// What can I do to loop through the roles and check the box if it exists in the user roles??
<b-form-group v-for="resource, key in getSystem.user_roles" v-if="getSystem.user_roles">
<label>{{resource.role_name}}</label>
<input type="checkbox" [ what do I put here to compare against user.roles, and check the box if exists??] >
</b-form-group>
解决方案
Checkbox binding Docs中有详细记录此行为。
这是一个模拟你的逻辑的小例子
new Vue({
el: '#app',
data: {
user: {
email: 'test@test.com',
roles: [{id: 1, name: 'Client'}]
},
roles: [
{
id: 1,
name: 'Client',
},
{
id: 2,
name: 'Admin',
},
{
id: 3,
name: 'Guest',
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div>
<label>Email</label>
<input type="text" v-model="user.email" />
</div>
<div v-for="role in roles" :key="role.id">
<label>{{role.name}}</label>
<input type="checkbox" v-model="user.roles" :value="role"/>
</div>
<p>User's selected roels</p>
{{user.roles}}
</div>
推荐阅读
- javascript - 即使在字符串化之后也得到 [object, Object]
- python - Swagger/OpenAPI 将文档放在哪里?
- reactjs - React 如何制作漂亮的 dnd 工作的表格容器
- java - 当孩子被归类为父母时,我可以访问孩子的方法吗?
- mysql-workbench - 第 1 行的错误 1064 (42000):您的 SQL 语法有错误
- python - 损失函数中的正则化项进行数学运算和赋值
- javascript - 有没有办法通过动态索引(如链接{1}、链接{2}等)传递道具?
- php - 如何使用从数据库返回的日期调用自定义函数?
- magento - Magento 2.4 缓存不会真正清除
- postgresql - Postgres SQL - 每行滚动 24 小时权重的总和