Select is not updating the label when the v-model attribute is cleared

[laurengriffin]

Hi,

I have this following code

<div
  v-for="(selected, index) in data"
  :key="index"
>
  <vue-select
    v-model="data[index]"
    :data="dataOptions"
    placeholder="Select"
  >
    <vue-option
      v-for="option in dataOptions"
      :key="option.value"
      :value="option.value"
      :label="option.label"
    />
  </vue-select>
</div>

However, when I clear the data[index] for the corresponding index, the data is updated correctly but the label displayed stays the same and gives the illusion that the data wasn't cleared. Is there a way to update the label when the data in the v-model object is changed?

[varave]

@laurengriffin hi, maybe your problem will be solved this: https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

[varave]

@antonreshetov the problem is on this line https://github.com/antonreshetov/vue-form-components/blob/af443d80d1a40bf4f1c5c4a016ebead74421b527/src/components/select/Select.vue#L222, if this.value is empty, then you need to clear this.selected. I fixed this code and it worked:

setInitValue () {
  if (this.multiple) {
    this.selected = this.value.map(item => {
      return this.data.find(i => i.value === item)
    })
  } else if (this.value !== '') {
    this.selected = this.data.find(item => item.value === this.value)
  } else {
    this.selected = {}
  }
},