[Vuejs]-Autocomplete Vue Js

by

4👍

✅

You should not use v-select component.
vuetify has its own autocomplete component.
create v-autocomplete and bind items to your data:

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

and here is your script data:

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

1👍

you can use this component from npmjs.org

import VueMultiSelect from "vue-simple-multi-select";
Vue.component('vue-multi-select', VueMultiSelect);


<vue-multi-select
  v-model="album.genre"
  :options="genreList"
  option-key="id"
  option-label="name"
></vue-multi-select>
👤Ali Raza

0👍

If you are okay with using third party plugin try this-plugin

In the template field:

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

In the script field:

//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)
 }
👤KDV

0👍

You can still use vue-search-select, firstly install it by
npm i vue-search-select or yarn add vue-search-select

import { ModelListSelect } from "vue-search-select";
components: {ModelListSelect },

<model-list-select
:isError="validation_errors.insurance_company ? true : false"
:list="compa"
v-model="data.insurance_company"
option-value="id"
option-text="companyName"
placeholder="select Company">

https://www.npmjs.com/package/vue-search-select

👤Kaddu Livingstone

0👍

I thought you are using Material Style Vuetify, so for add the autocomplete you must use

using v-autocomplete not v-select

Here the example code :

<v-autocomplete
  v-model="value"
  :label="label" // This for set the name of this field
  :items="items" // This for set the list items that you want to show
  :item-text="itemText" // This for set the object that you want to display
  return-object // This will return 1 object of selected data
/>

Here the script:

data: () => ({
  label: "Autocomplete",
  items: [
    {
      id: 1,
      name: "Name Item A"
    },
    {
      id: 2,
      name: "Name Item B"
    },
  ],
  itemText: "name",
  value: null
})
👤Daniel Christianto

Leave a comment