Vue.js v-autocomplete v-model 新数据

Question

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

我想输入未包含在项目中的新文本。

自动完成只是给用户的建议。但是我无法在 v-autocomplete 中输入新数据。每当我写入新数据时，它都会被删除。

Answer 1

如果您希望用户添加自己的值，您应该使用 v-combobox (doc here) 而不是 v-autocomplete

如果你想处理多个值，你可以使用 multiple 属性并将数组传递给 v-model 而不是字符串（或者对象，如果你使用 return-object参数）

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 新数据

Vue.js v-autocomplete v-model new data

vue.js

vuetify.js

v-autocomplete