如何通过 v-model 设置已选中复选框的计算属性？

Question

我查看了多个资源，但没有找到解决方案：

https://vuejs.org/v2/guide/computed.html

我和有角色的人有一个 table，如果我想更改角色，我会打开一个模式。

<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] 我也尝试在 data () { return {... } 中添加 checkedRoles: this.roles,。但是当我多次打开一个modal时，之前点击的row.item的角色还在数据中属性.

请指教

如果我应该使用计算属性，或者更深入地研究 [选项 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-model 设置已选中复选框的计算属性？

How set computed property of checked checkboxes via v-model?

javascript

vue.js

vuejs2

vue-component

bootstrap-vue

如何通过 v-model 设置已选中复选框的计算 属性？

How set computed property of checked checkboxes via v-model?

javascript

vue.js

vuejs2

vue-component

bootstrap-vue

如何通过 v-model 设置已选中复选框的计算属性？