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

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

0 голосов
/ 20 октября 2018

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

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

<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. , если яследует использовать вычисляемое свойство или углубиться в [option 2]

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

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

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

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

<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
 }
}
0 голосов
/ 20 октября 2018

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