Vue Js中的复选框数组

Question

我有一个复选框的数组，来自存储所有系统设置的主系统对象(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>

- Kylie

---

不确定 getSystem.user_roles 和 user.roles 的模式，看起来是这样的 <input type="checkbox" :checked="user.roles[resource.role_name]" >？ - Sphinx

这是一个对象数组。因此，我需要检查resource.id与user.roles中每个对象的id是否匹配。所以对于每个用户角色，例如foreach user.roles as role，resource.id == role.id等等。 - Kylie

Answer 1

这种行为在复选框绑定文档中有详细说明。

以下是一个模拟您逻辑的小例子：

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>

- DobleL

---

但在我的情况下，user.roles是一个对象数组，而不仅仅是数字/键的数组。 - Kylie

它是相同的逻辑，但使用对象，请检查编辑后的代码。如果getSystem.user_roles具有不同的格式，只需将其映射到user.roles的形状。 - DobleL

Answer 2

<input type="checkbox" v-model="userRoles" :true-value="[]" :value="resource.role_name">

你应该添加:true-value="[]"。

- Ömer Faruk PARLAR

---

StackOverflow中的最佳答案 - Emad Rashad Muhammed

Answer 3

我们可以使用动态复选框输入渲染来选择自定义函数（在我的例子中是selectUsers）中的值。在该函数中，我们可以编写需要比较的条件，然后再将其附加到所选数组中。

演示： 这是带有虚拟数据的完整NuxtJs(vue)组件。

<template>
  <v-container fluid>
    <p>{{selected }}</p>
    <div v-for="user in user_roles" :key="user[0]">
    <input type="checkbox"
      @click="()=>{selectUsers(user[0])}"
      :value="user[0]"
    >
    {{user[1]}}
    </div>
  </v-container>
</template>

<script>
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
export default {
    
    data() {
    return {
      user_roles:[[1,"dd"],[2,"ddd"],[3,"kksse"],[4,"kske"]] ,
      selected:[],
    };
  },
  methods: {
      selectUsers(id){
          //in here you can check what ever condition  before append to array.
          if(this.selected.includes(id)){
              this.selected=_.without(this.selected,id)
          }else{
              this.selected.push(id)
          }
      }
  }
}
</script>

- Kelum Sampath Edirisinghe

Answer 4

<b-form-group v-for="resource, key in getSystem.user_roles" v-if="getSystem.user_roles" :key="key">
   <label>{{resource.role_name}}</label>
   <input type="checkbox" v-model="userRoles" :value="resource.role_name"  > 
</b-form-group>

<script>
  data(){
    return {
      userRoles: []
    }
  }
</script>

- Quoc Quach

---

这个选项目前对我来说不起作用。我没有点踩，只是没有点赞。 - AtLeastTheresToast

Answer 5

在我的情况下，由于我正在服务器上呈现复选框，对我有效的方法是将：value替换为value。

@foreach($carOptions as $option)
<div class="form-check">
    <input class="mx-2 form-check-input cursor-pointer"
           type="checkbox"
           value="{{$option}}" <------ HERE in order for vue to work I had to change from :value to value
           v-model="offer.carOptions">
    <label class="custom-control-label cursor-pointer"
           for="leading">{{ __($option) }}</label>
</div>
@endforeach

注意：代码片段是 Laravel Blade 模板。

- Adelin