javascript - JS/Vue：如何为美国自动完成选择下拉菜单？

Question

我有一组状态对象：

options = [
    {text: "California", value:"CA"},
    {text: "New York", value: "NY"},
]

当我将 v-model 设置为 onlyvalue字段时，浏览器自动完成功能有效：

<select>
    <option v-model="selectedState" v-for="option in options" :value="option.value">
       {{ option.text }}
    </option>
</select>

/// selectedState = "NY"

但我需要 selectedState v-model 作为对象，这就是阻止自动完成填充状态的原因：

<select>
    <option v-model="selectedState" v-for="option in options" :value="option.value">
       {{ option.text }}
    </option>
</select>

/// selectedState = {"text": "New York", "value": "NY"}

我有什么办法可以做到这一点吗？

标签： javascriptvue.js

Answer 1

您可以使用计算属性从选定的值返回期望对象

    computed: {
        selectedState() {
            return this.states.find( i => i.value == this.selected );
        }
    }

这是Codepen 示例