Bootstrap-vue 多选数据绑定：无限循环

Question

我正在尝试从 bootstrap-vue 设置多选控件并将其绑定到 JSON 对象。问题是我需要一个计算值才能在 int 数组中为多选选定值获取我的 json 数据格式，反之亦然。使用这样的计算属性意味着我在渲染时更改日期，这会导致无限循环。

目前我创建了一个计算属性，它有一个将 JSON 对象数组转换为整数数组的 getter 以及一个相反的 setter。在我的示例代码中，JSON 对象仅包含 id，但在我的生产代码中，“公司”内还有很多其他字段。

<template>
  <b-form>
    <b-form-select
    :id="`input-companies`"
    v-model="companiesSelected"
    multiple
    :select-size="4"
    :options="availableCompanies"
    ></b-form-select>
  </b-form>
</template>

<script>
const availableCompanies = [
  { value: 1, text: 'company1' },
  { value: 2, text: 'company2' },
  { value: 3, text: 'company3' },
  { value: 4, text: 'company4' }
]

export default {
  data () {
    return {
      employee: { id: 1, name: 'test', companies: [ { id: 1 }, { id: 2 } ] },
      availableCompanies: availableCompanies
    }
  },
  computed: {
    companiesSelected: {
      get () {
        if (this.employee.companies == null) {
          return []
        }
        return this.employee.companies.map(company => { return company.id } )
      },
      set (newValue) {
        if (newValue == null) {
          this.employee.companies = []
        } else {
          this.employee.companies = newValue.map(companyId => { return { id: companyId } })
        }
      }
    }
  }
}
</script>

this.employee.companies 的设置导致无限循环。我真的不知道如何避免这种情况。有谁知道如何解决这个问题？

Answer 1

我基本上将您的计算集拆分为 @change 事件，它似乎正在工作。

@change 事件应该只从用户交互中触发，因此应该导致循环。

https://codepen.io/Hiws/pen/agVyNG?editors=1010

我不确定这对你来说是否足够，因为我在编写上面的示例时没有考虑公司的额外字段。