Я пытаюсь настроить элемент управления множественным выбором из 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 приводит к бесконечному циклу. Я действительно не знаю, как этого избежать. Кто-нибудь знает, как побороть эту проблему?
