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

Question

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

目前我创建了一个计算属性，它有一个 getter 将 JSON 对象数组转换为整数数组，还有一个 setter 做相反的事情.在我的示例代码中，JSON 对象仅包含 id，但在我的生产代码中，"company".

中还有很多其他字段

<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

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

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

Bootstrap-vue multiselect data binding: infinite loop

javascript

vue.js

vuex

bootstrap-vue