[Vuejs]-VueJs – Array of options with multi select checkbox and a textfield with value

by

0👍

It’s because you declare an empty string for the ‘value’ property in roles array,

Edit

new Vue({
  el: '#app',
  data: {
    user: {
      email: 'test@test.com',
      roles: [
        {
          id: 1,
          name: 'Client',
        },
      ],
      rolesValue: ['Client Role Value']
    },
    roles: [
      {
        id: 1,
        name: 'Client',
        
      },
      {
        id: 2,
        name: 'Admin',
        
      },
      {
        id: 3,
        name: 'Guest',
        
      }
    ]
  },
  methods: {
   getRoleIndex(id){
    return this.user.roles.findIndex(x => x.id === id);
   },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<template>

     <label>Email</label>
            <input type="text" v-model="user.email" />
        </div>
        <div v-for="(role,index) in roles" :key="index">
            <label>{{role.name}}</label>
            <input type="checkbox" v-model="user.roles" :value="role"/>
            
            <p v-if="getRoleIndex(role.id) !== -1">
              <input type="text" v-model="user.rolesValue[getRoleIndex(role.id)]">
            </p>
        </div>

        <p>User's selected roels</p>
        {{user.roles}}
        <p>User's roles value</p>
        {{user.rolesValue}}
        </template>
</div>

Leave a comment