Vue.js v-autocomplete v-model new data

Question

<v-autocomplete v-if="first.title == 'host'"
                :items="host"
                v-model="selected_host"
                item-value="host_n"
                outlined
                hide-details
                dense
              ></v-autocomplete>

I'd like to input new text which is not included in items.

autocomplete is just suggestion to user. But I can't input new data in v-autocomplete. Whenever I write new data, it was deleted.

score 0 · Accepted Answer · answered Apr 19 '22 at 09:26

You should use v-combobox (doc here) instead of v-autocomplete if you want the user to add its own value

If you want to deal with multiple values, you can use the multiple attributes and passing an array to the v-model instead of a string (or an object if you use the return-object param)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  computed: {
    tagsSorted() {
      return this.tags.sort()
    }
  },
  data: () => ({
    host: [{
        host_n: 'Foo',
      },
      {
        host_n: 'Bar',
      }
    ],
    first: {
      title: 'host'
    },
    selected_host: ''
  }),

  methods: {
    sendData() {
      console.log(this.selected_host)
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css" />
<div id="app" data-app>
  <v-combobox v-if="first.title == 'host'" :items="host" v-model="selected_host" item-value="host_n" item-text="host_n" outlined hide-details dense></v-combobox>
  <v-btn @click="sendData">Send data</v-btn>
</div>

Vue.js v-autocomplete v-model new data

1 Answers1