Question

我尝试在vue js中添加自动完成功能。但是它不能正常工作。加载页面时，选择的值“ one”显示在v-select标签中，但下拉列表中未显示itemsList。如何解决？

Select
   <v-select
      v-model="selected"
      :items="itemList"
      :search-input.sync="searchInput"
      autocomplete
   />

data: function () {
            return {
                itemList: ['one', 'two'],
                searchInput: '',
                selected: 'one'
            }
        },

Answer 1

您不应使用v-select组件。 vuetify具有自己的自动完成组件。创建v-autocomplete并将项目绑定到您的数据：

 <v-autocomplete
    label="itemList"
    :items="itemList"
 />

这是您的脚本数据：

  data() {
    return {
      itemList: [
        'one', 'two', 'three',
      ],
    };
  }

Answer 2

如果您使用的是vuetifyjs组件，请尝试通过以下链接进行自动填充

https://vuetifyjs.com/en/components/autocompletes

Answer 3

如果可以使用第三方插件，请尝试this-plugin

在模板字段中：

<input
      name="tags-select-mode"
      v-model="selectedOption"
      placeholder="Search"/>

在脚本字段中：

//use this code in mounted 
var input = document.querySelector('input[name=tags-select-mode]'),
tagify = new Tagify(input, {
    mode : "select",
    whitelist: ["first option", "second option", "third option"],
    blacklist: ['foo', 'bar'],
    dropdown: {
        // closeOnSelect: false
    }
})

tagify.on('add', onAddTag)
tagify.DOM.input.addEventListener('focus', onSelectFocus)

function onAddTag(e){
   console.log(e.detail)
}

function onSelectFocus(e){
  console.log(e)
 }

自动完成Vue Js

3 个答案: