Vue Js 中的复选框数组 [英] Checkbox array in Vue Js

问题描述

我有一组复选框，来自我存储所有系统设置的主系统对象.(称为 getSystem{}).

在这种形式中，我访问了一个用户，它有一个角色数组[].如何根据 getSystem.user_roles 检查此角色数组?

我知道如何正常进行，显然是在 javascript 中.但是我会在复选框输入 Vue.js 中输入什么?

 <label for="company">电子邮件地址</label><b-form-input type="text" id="email" v-model="user.email" placeholder="输入有效的电子邮件"></b-form-input></b-form-group>//在这里我可以执行 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" [我在这里放什么来与 user.roles 进行比较，并检查该框是否存在??] ></b-form-group>

解决方案

这种行为在 复选框绑定 文档.

这是一个模拟逻辑的小例子

new Vue({el: '#app',数据: {用户:{电子邮件:'[e-mail]'，角色:[{id:1，名称:'客户'}]},角色: [{编号:1，name: '客户',},{编号:2，name: '管理员',},{编号:3，name: '客人',}]}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><div id="应用程序"><div><label>电子邮件</label><input type="text" v-model="user.email"/>

<div v-for="role in roles" :key="role.id"><label>{{role.name}}</label><input type="checkbox" v-model="user.roles" :value="role"/>

<p>用户选择的角色</p>{{user.roles}}

I have an array of checkboxes, coming from a main system object where I store all system setting. (called getSystem{}).

In this form, Im accessing a User, which has an array of roles []. How can I check this array of roles, against the getSystem.user_roles?

I know how to do it normally, in javascript obviously. But what would I put in the checkbox input Vue.js wise?

    <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>

解决方案

This behavior is well documented on the Checkbox binding Docs.

Here a little example emulating your logic

new Vue({
  el: '#app',
  data: {
    user: {
      email: '[e-mail]',
      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>

这篇关于Vue Js 中的复选框数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！