[Vuejs]-Change options and value at the same time

by

2👍

✅

Changing the options and the value at the same time is confusing Vue. This is probably a minor bug in Vue. If you use $nextTick to push the value change off to the next update cycle, they all work.

change: function () {
  this.options = [{Value:1, Text:1}, {Value:2, Text:2}, {Value:3, Text:3}];
  this.$nextTick(() => {
      this.value = 3;
  });
}
👤Roy J

0👍

It seems that this is a known bug which was closed because a workaround was found.

The workaround is to declare another property and cast v-model on it. This solutions is easier to implement inside a component.

https://jsfiddle.net/6gbfhuhn/8/

Html

<template id="template-select-option">
    <select v-model="innerValue">
        <option v-for="item in options" :key="item.Value" :value="item.Value">{{item.Text}}</option>
    </select>
</template>

Javascript

Vue.component('select-option', {
  template: '#template-select-option',
  props: ['value', 'options'],
  computed: {
    innerValue: {
      get: function() { return this.value; },
      set: function(newValue) { this.$emit('input', newValue); }
    }
  }
});

Note: In the github thread, it is suggested to use a computed property instead, but if you use a computed property, vue will throw warning every time you change the value in your dropdown because computed property don’t have setter.

👤Gudradain

Leave a comment