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

Question

我有一个状态对象数组：

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

当我将v模型设置为仅value字段时，浏览器自动完成功能起作用：

<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 = {“文本”：“纽约”，“值”：“ NY”}

我是否有其他选择来完成此操作？

Answer 1

您可以使用计算属性从选定值返回所需对象

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