Bootstrap-vue multiselect data binding: infinite loop

Question

I'm trying to setup a multi select control from bootstrap-vue and bind it to a JSON object. The problem is that I need a computed value to get my json data format in a int array for the multiselect selected values and vice versa. Using such a computed property means that I change date while rendering which leads to an infinite loop.

Currently I created a computed property which has a getter which transforms the JSON object array in a integer array as well as a setter which does the opposite. In my example code the JSON object only contains the id, but in my production code there are a lot of other fields inside a "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>

The setting of this.employee.companies leads to a infinite loop. I don't really know how to avoid this. Does anyone know how to overcome this issue?

Hiws Hiws · Accepted Answer · 2019-06-27T14:12:56

I basically split your computed set into the @change event and it seems to be working.

The @change event should only fire from user interactivity and should therefor cause the loop.

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

I'm not sure if that's enough for you, as i didn't take the extra fields on a company into consideration when writing the example above.

Bootstrap-vue multiselect data binding: infinite loop

1 Answers