Bootstrap-vue многоэлементное связывание данных: бесконечный цикл

Question

Я пытаюсь настроить элемент множественного выбора из bootstrap-vue и связать его с объектом JSON.Проблема в том, что мне нужно вычисленное значение, чтобы получить формат данных json в массиве int для множественного выбора выбранных значений и наоборот.Использование такого вычисляемого свойства означает, что я изменяю дату во время рендеринга, что приводит к бесконечному циклу.

В настоящее время я создал вычисляемое свойство, которое имеет метод получения, который преобразует массив объектов JSON в целочисленный массив, а также метод установкикоторый делает обратное.В моем примере кода объект JSON содержит только идентификатор, но в моем производственном коде внутри "компании" много других полей.

<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

Я не уверен, достаточно ли это для вас, поскольку я не учел дополнительные поля в компании при написании примера выше.