Как установить вычисляемое свойство отмеченных флажков через v-модель?

Я просмотрел несколько ресурсов, но не нашел решения:

У меня есть таблица с людьми, у которых есть роли, если я хочу изменить роли, я открываю модальное окно.

<template>
  <div>
    <b-table small outlined striped hover :items="peoplePaginated.data" :fields="fields" >
      <template slot="actions" slot-scope="row">
        <b-button size="sm" class="my-2 my-sm-0 btn-outline-info" v-b-modal="'federation-role-modal'" @click.stop="change(row.item)">
        edit
        </b-button>
        <b-button size="sm" @click.stop="info(row.item, row.index, $event.target)" class="btn btn-outline-success btn-sm">
          details
        </b-button>
      </template>
    </b-table>
    <FederationRoleModal :roles="roles" />
  </div>
</template>


data () {
 return {
    roles: [],
 }
},


  methods: {
    info (item) {
      this.$router.push({ name: 'person', params: { id: item.id }})
    },
    change (person) {
      const roles = person.personRoles.map(el => el)
      const allRoles = roles.map(el => el.roleCategory.name)
      this.roles = allRoles
    }
  }

Затем у меня есть список флажков, где checkedRoles устанавливает отмеченные. Когда я устанавливаю новый флажок, я хочу, чтобы свойство данных обновлялось. Однако этого обновления не происходит.

В модальном режиме:

<span v-for="value in allRoles" :key="value.id">
    <input type="checkbox" :value="value" v-model="checkedRoles">
    <span class="checkbox-label"> {{value}} </span> <br>
</span>



computed property: {
  checkedRoles: {
    get: function () {
      // console.log(this.roles)
      return this.roles
    },
    set: function (newValue) {
      // console.log(newValue)
      return newValue
    }
  }
}

this.roles происходит от родительского компонента (массива с ролями). Я вижу вывод console.log(newValue) как новый массив с дополнительной ролью, но этот новый массив не отображается как свойство данных checkedRoles.

  • [вариант 2] Я также пытался добавить checkedRoles: this.roles, в data () { return {... }. Но когда я открываю модальное окно несколько раз, роли предыдущего row.item, по которому щелкнули, все еще находятся в свойстве data.

пожалуйста, порекомендуйте

  1. если мне нужно использовать вычисляемое свойство, или углубиться в [вариант 2]

  2. как получить все отмеченные флажки в свойстве данных checkedRoles.


javascript vue.js vuejs2 vue-component bootstrap-vue
person Robert    schedule 20.10.2018    source источник
comment
Не уверен в особенностях вашей реализации, но вот быстрый скрипт, чтобы показать вам, как это можно сделать.   -  person Husam Ibrahim    schedule 20.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

checkRoles должен быть пустым массивом в вашем объекте данных, например:

   data(){
      return{
        checkedRoles:[]
        ...
       }
     }

     <span v-for="value in allRoles" :key="value.id">
       <input type="checkbox" :value="value" v-model="checkedRoles">
       <span class="checkbox-label"> {{value}} </span> <br>
     </span>
person Boussadjra Brahim    schedule 20.10.2018
comment
Верный. Безусловно, у этого человека уже могут быть роли, поэтому я хочу назначить эти роли для инициации checkedRoles. - person Robert; 20.10.2018
comment
в этом случае вы можете передать отмеченные роли родительскому компоненту и переопределить роли человека в родительском компоненте с помощью функции this$emit - person Boussadjra Brahim; 20.10.2018
comment
Поставил решение в моем ответе ниже. Это действительно через this.$emit. - person Robert; 24.10.2018

arrow_upward
1
arrow_downward

Решение включало изменение свойства данных родительского компонента:

В родительский компонент добавьте:

<FederationRoleModal :checked-roles="roles" @update-role="onUpdateRole"/>

методы:

    onUpdateRole(value) {
      let rolesArray = this.roles
      if (rolesArray.includes(value)){
        var index = rolesArray.indexOf(value)
        if (index > -1) {
          return rolesArray.splice(index, 1);
        }
      } else {
        return rolesArray.push(value)
      }
    }

в дочернем компоненте

      <span v-for="value in allRoles" :key="value.id">
        <input type="checkbox" :value="value" v-model="roles" @click="$emit('update-role', value)">
        <span class="checkbox-label"> {{value}} </span> <br>
      </span>

данные:

props: ['checkedRoles'],

вычислено:

roles: {
  get: function () {
   return this.checkedRoles
 },
 set: function (newValue) {
   return newValue
 }
}
person Robert    schedule 22.10.2018