как выделить выбранными inputs на edit VUE.JS?

Question

//Если в employee.roles.roles есть role которая в списке тогда ее выбрать

<select
                                        v-model="employee.roles.roles"
                                        class="form-control"
                                        :class="{ 'is-invalid': $v.employee.roles.roles.$error }"
                                        id="roleSelect"
                                        multiple="multiple"
                                    >
                                        <option value="manager">Менеджер</option>
                                        <option value="seller">Продавец</option>
                                    </select>

Answer 1

Если employee.roles.roles будет содержать массив ролей, например:

employee: {
  roles: {
    roles: ['manager', 'seller'] //данные приходят с сервера
  }
},

тогда при загрузке данных, содержащиеся роли будут автоматически выбраны в select.

Вот рабочий пример:

new Vue({
  el: '#app',
  data() {
    return {
      employee: {
        roles: {
          roles: [] //данные приходят с сервера
        }
      },
      //Все роли
      options_roles: [{
          slug: 'manager',
          name: 'Менеджер'
        },
        {
          slug: 'seller',
          name: 'Продавец'
        },
        {
          slug: 'customer',
          name: 'Покупатель'
        },
      ],
    }
  },
  mounted() {
    // симуляция подгрузки данных
    setTimeout(() => {
      this.employee.roles = {
        roles: ['manager', 'customer']
       }
    }, 1500)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select
    v-model="employee.roles.roles"
    class="form-control"
    :class="{ 'is-invalid': employee.roles.roles.$error }"
    id="roleSelect"
    multiple="multiple"
  >
    <option
      v-for="options_role in options_roles"
      :key="options_role.slug"
      :value="options_role.slug"
     >
      {{ options_role.name }}
    </option>
  </select>
  <pre>
    {{ employee }}
  </pre>
</div>

БЛОГ НА HUSL

как выделить выбранными inputs на edit VUE.JS?

Ответы (1 шт):