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>

Answer 1

Checkbox binding文档中详细记录了此行为。

这是一个模仿你的逻辑的小例子

＆＃13;

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',
      }
    ]
  }
})

＆＃13;

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

＆＃13;

Answer 2

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

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>

Answer 4


use std::ptr;
use std::marker::PhantomData;

use std::fmt::Debug;
impl<'a, T:Debug> Drop for World<'a, T> {
    fn drop(&mut self) {
       unsafe{
        println!("I was only {:?} days from retirement!", ptr::read(self.ptr));
       }
    }
}

struct World<'a, T:Debug> {
    ptr: *mut T,
    _marker: PhantomData<&'a mut T>,
}
fn main() {

    let mut v = 8usize;
    let mut world = World {
        ptr: &mut v as *mut usize,
        _marker: PhantomData
    };
    let mut v = 99usize;
    world.ptr = &mut v as *mut usize;
}

您应该添加 <input type="checkbox" v-model="userRoles" :true-value="[]" :value="resource.role_name">。

Vue Js中的复选框数组

4 个答案: