Vue Js의 확인란 배열

Vue Js의 확인란 배열

모든 시스템 설정을 저장하는 기본 시스템 개체에서 가져온 일련의 확인란이 있다.(getSystem{}라고 함).

이 양식에서 임은 역할 []의 배열이 있는 사용자에 액세스한다.getSystem.user_roles에 대해 이 역할 배열을 확인하는 방법은?

나는 그것을 정상적으로 하는 방법을 알고 있다. 자바스크립트로 분명히.하지만 내가 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 바인딩 문서에 잘 설명되어 있다.

여기 당신의 논리를 본뜬 작은 예시.

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>

동적 확인란 입력 렌더링을 조건과 함께 사용하여 사용자 정의 함수에서 값을 선택할 수 있다(내 예에서).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>

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

추가해야 한다.:true-value="[]".

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

참조URL: https://stackoverflow.com/questions/50648407/checkbox-array-in-vue-js