Question

我看过几种资源，但是找不到解决方案：

我有一个有角色的人的桌子，如果我想更改角色，请打开模式。

<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负责选中的复选框。当我单击一个新的复选框时，我希望data属性被更新。但是，此更新不会发生。

在模式中：

<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属性中。

请告知

如果我应该使用计算属性，或者更深入地研究[选项2]
如何使所有选中的复选框都位于checkedRoles数据属性中。

Answer 1

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>

Answer 2

解决方案包括修改父组件数据属性：

在父组件中添加：

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

如何通过v模型设置选中复选框的计算属性？

2 个答案: