Question

当我尝试同时更改我的选项及其值的选项时，我遇到了问题。如果我使用v-model，它会正常运行，但如果我使用v-bind:value + v-on:change，则无效。

这是一个js小提琴，将说明问题：https://jsfiddle.net/2vcer6dz/18/

第一次点击按钮＆＃34;更改＆＃34;时，只有第一个选择值为3.如果你再次点击它们全部变为3。

HTML

<div id="app">
  <select v-model="value">
    <option v-for="item in options" :key="item.Value" :value="item.Value">{{item.Text}}</option>
  </select>
  <select :value="value" v-on:change="value = $event.target.value">
    <option v-for="item in options" :key="item.Value" :value="item.Value">{{item.Text}}</option>
  </select>
  <select-option v-model="value" :options="options"></select-option>
  <br />
  <input type="button" value="change" v-on:click="change" />
</div>

<template id="template-select-option">
    <select :value="value" v-on:change="update($event.target.value)">
        <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'],
  methods: {
    update: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
    el: '#app',
  data: {
    value: 1,
    options: [{Value:1, Text:1}, {Value:2, Text:2}]
  },
  methods: {
    change: function () {
      this.options = [{Value:1, Text:1}, {Value:2, Text:2}, {Value:3, Text:3}];
      this.value = 3;
    }
  }
});

预期结果

所有选择都应该具有值＆＃34; 3＆＃34;当你点击按钮＆＃34;改变＆＃34;

Answer 1

同时更改选项和值会让Vue感到困惑。这可能是Vue中的一个小错误。如果您使用$nextTick将值更改推送到下一个更新周期，则它们都可以正常工作。

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

Answer 2

这似乎是known bug因为找到了解决方法而被关闭了。

解决方法是声明另一个属性并在其上投射v-model。此解决方案更易于在组件内实现。

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); }
    }
  }
});

注意：在github线程中，建议使用计算属性，但如果使用计算属性，每次更改下拉列表中的值时，vue都会抛出警告，因为计算属性不具备设定器。

同时更改选项和值

2 个答案: