Accomplish the select box Vuetify behavior into a text field - laravel

Question

I want to accomplish the following, but using a textfield (v-text-field) input instead:
<v-select
:items="addresses"
label="Address Field"
item-value="id"
item-text="address_line1"
v-model="address_id"
>
</v-select>
The select box returns all the "address_line1" (item-text) values from the addresses array (:items) and the default selected value is the one that matches with address_id (v-model) in the zones array. The data comes from two arrays of objects, that are related and comes from two external API. I want a textfield with the related value, and because I want the user to be able to update the field freely.
zones: [
{
"id": 1,
"name": "Museum",
"description": "description",
"address_id": 1,
"branch_id": 1,
"parent_zone_id": 2,
"provider_id": 10
},
{
"id": 2,
"name": "Restaurant",
"description": "description",
"address_id": 2,
"branch_id": 1,
"parent_zone_id": 2,
"provider_id": 10
},
]
addresses: [
{
"id": 1,
"name": "Address Name",
"address_line1": "7210 Euismod Rd.",
"address_line2": null,
"address_line3": null,
"zip_code": "6301",
"city": "Some City",
"state_id": 3296,
"country_id": 238,
"latitude": "10.99710000",
"longitude": "63.91130000",
"user_id": 11
},
{
"id": 2,
"name": "Address Name 2",
"address_line1": "2110 Elmond St.",
"address_line2": null,
"address_line3": null,
"zip_code": "6301",
"city": "Some Other City",
"state_id": 3296,
"country_id": 238,
"latitude": "10.99710000",
"longitude": "63.91130000",
"user_id": 11
}
]
The only way I can think of, is by hidding the select box, which picks the value selected. And then ref the value to the input text field somehow.

Answer 1

In this use case, v-autocomplete might be useful for you. It allows you to type on the field freely and will actively search for the addresses as you type.
<v-autocomplete
:items="addresses"
label="Address Field"
item-value="id"
item-text="address_line1"
v-model="address_id"
></v-autocomplete>
Here's a sample demo.
Also, you might want to update your vuetify to the latest version (vuetify 2.3.10 as of now) because I have encountered problems in lower versions, specifically vuetify 2.0.1. The problem is that v-autocomplete's displayed text is not updating properly when you try to select an option that is equal to its v-model value. Fortunately, this is fixed in later versions.