I am currently working with an array of state objects:
states = [
{name: "California", abbreviation: "CA"},
{name: "New York", abbreviation: "NY"},
]
When using browser autocomplete, I have noticed that it functions properly when I set the v-model to only reference the abbreviation field:
<select>
<option v-model="selectedState" v-for="state in states" :value="state.abbreviation">
{{ state.name }}
</option>
</select>/// selectedState = "NY"
However, my requirement is for the v-model selectedState to be the entire object and due to this, autocomplete does not work as expected:
<select>
<option v-model="selectedState" v-for="state in states" :value="state.abbreviation">
{{ state.name }}
</option>
</select>/// selectedState = {"name": "New York", "abbreviation": "NY"}
Is there a solution or any alternative method to achieve this functionality?