CODEWITHSUNDEEP
vue.jsvuexvuetify.js
Kim Vu
Kim Vu

Reputation: 668

Use v-model with v-select, where the initial v-model value is not in items tag

I want to have a value that is not in the displayNumberList to be preselected, but not selectable(aka not in the displayNumberList).

I've found that the v-model value has to be a value in the displayNumberList in order for it to be selected, is there a way around this?

<v-select v-model="displayNumber" :items="displayNumberList"></v-select>

Here's the data

data() {
    return {
      displayNumber: '12345678'
      displayNumberList: ['11111111','22222222']
    };
  },

Upvotes: 3

Views: 1623

Answers (3)

Vincenzo
Vincenzo

Reputation: 423

something that worked for me was adding a static value to the array like so:

      <v-select
       v-model="companySelected"
        :options="[{ id: 0, legal_name: 'Placeholder' }, ...yourOptions]"
         :reduce="(option) => option.id"
        label="legal_name">
      </v-select>

Upvotes: 0

Nate
Nate

Reputation: 615

If i've understood your question correctly, you can do this using Append/Prepend item slots https://vuetifyjs.com/en/components/selects#prepend-append-item-slots

Upvotes: 1

Lu&#237;zaRusso
Lu&#237;zaRusso

Reputation: 178

Maybe you could use use a placeholder: https://codepen.io/luizarusso/pen/KKwBKZj

<v-select
    v-model="model"
    :items="items"
    label="Items"
    placeholder="12345678"
>
</v-select>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['11111111','22222222'],
  }),
})

Upvotes: 3

Related Questions