Accomplish the select box Vuetify behavior into a text field

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.

Blackraspberryyy Blackraspberryyy · Accepted Answer · 2020-09-03T00:31:36

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.

Accomplish the select box Vuetify behavior into a text field

1 Answers