Question

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

当前，我创建了一个计算属性，该属性具有一个getter，该getter可以将JSON对象数组转换为整数数组，还有一个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

我不确定这是否足以满足您的需要，因为在编写上述示例时，我没有考虑公司的额外字段。

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

1 个答案: