选择框不更新 v-model答案

【问题标题】：Select box does not update v-model选择框不更新 v-model
【发布时间】：2020-03-03 15:28:19
【问题描述】：

我遇到了一个我无法解决的小问题。我创建了一个这样的选择框https://codepen.io/spqrinc/pen/wvaqrPj

<div id="app">
  Selected value: {{item.picked}}
  <hr />
<select v-model="item.picked">
  <option v-for="(item, index) in item.values" :value="item.value" :key="index">{{item.value}} - {{item.title}}</option>
</select>
</div>

这是有效的（如您在示例中所见）。

现在我添加了vue-router 并添加了这个：

  beforeRouteEnter (to, _from, next) {
            let querypath = `/path/to/api`;

            next (vm => {
                vm.$wait.start ('loading');
                axios
                .get (querypath).then ((resp) => {
                    vm.item = resp.data.data;
                    vm.item.picked = 1;
                    vm.$wait.end ('loading');
                });
            });
        },

现在自动选择第一个值。但是，如果我选择其他值，则 v-model 不会更新。 Selected value: 总是显示1。

为什么会这样？

感谢您的帮助。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

item.picked 在Selected value: {{item.picked}} 中没有反应性，因此它只读取挂载时的初始值。

为了澄清您的观点，v-model 正在更新，但显示没有。

要解决此问题，请使用返回 item.picked 的计算属性。

例如

将Selected value: {{item.picked}} 重构为Selected value: {{pickedItem}}
添加pickedItem 的计算属性

computed: {
    pickedItem() {
      return this.item.picked;
    }
  }

【讨论】：