使用 vuejs 动态更改选项时选择不呈现新的：值答案

【问题标题】：Select not rendering new :value when changing options dynamically with vuejs使用 vuejs 动态更改选项时选择不呈现新的：值
【发布时间】：2021-12-17 09:08:53
【问题描述】：

我创建了一个小的 jsfiddle 来解释错误以及如何在此处重现它：https://jsfiddle.net/4Leu9a6x/57/

我有一个选择，我使用 @change 和 :value 来更新和显示值。我知道我可以使用v-model，但我的应用程序相当复杂，所以这是目前唯一的方法。

当我动态更改选项时出现问题。一旦我更改它们，选择的值（用户看到的值）与实际值不同（由 vue 保存在数据中）。即使我确实有 :value。

我不明白为什么当 :value 不在选项中时它不显示灰色选择（没有选择任何内容）。

上面的jsfiddle会很清楚的显示这个问题。关于如何使两者保持同步的任何想法？

【问题讨论】：

为什么不能使用v-model？这样就很容易解决了。
主要是因为是来自vuex的数据所以需要commit。
看看这个答案，听起来你可能会追求什么：stackoverflow.com/questions/54928111/…

标签： vue.js vuejs2

【解决方案1】：

v-model 有specific behavior 来处理<select> 的选项动态更改的情况。由于您没有使用v-model，因此您必须自己处理这些问题。

与其他输入元素一样，<select> 有自己的内部状态（value 和 selectedIndex），浏览器维护（不是 Vue）。如果您在不更改值的情况下更改选项，那么当 Vue 重新渲染时，它不会设置 select 的值，因为该值没有更改，因此您将获得浏览器选择的任何状态，并且可能是绑定值将与选择的实际值不同步。

几个解决方案：

绑定<select> 的key 以在选项更改时重新创建元素 (fiddle)。
将<select>包装在一个组件中，并手动将元素的selectedIndex设置为所选选项的索引。阅读 v-model source 了解 Vue 是如何做到的。
更改选项数据时，还要更改值数据，使其与实际选项相对应。但这并不能解决<select>在更改选项而不是值后值与任何选项不匹配时不选择选项的问题。

【讨论】：

【解决方案2】：

在运行 shuffle 方法时添加 this.val = this.options[0];。这是因为每次运行 shuffle 方法时它都会重置选项，因为您的值不是双向绑定的，所以该值不会被更新。否则，您可以重构代码并使用 v-model。

new Vue({
el: "#app",
data: {
    val: 2,
    options: [1, 2, 3, 4]
},

methods: {
    shuffle() {
        this.options = [Math.random(), Math.random(), Math.random()]
        this.val = this.options[0];
    }
}
})

【讨论】：