Saya mencoba menambahkan pelengkapan otomatis di vue js. Tapi itu tidak bekerja dengan benar. Nilai yang dipilih 'satu' ditampilkan di label v-select saat halaman dimuat, tetapi itemsList tidak muncul di dropdown. Bagaimana memperbaikinya?

Select
   <v-select
      v-model="selected"
      :items="itemList"
      :search-input.sync="searchInput"
      autocomplete
   />
data: function () {
            return {
                itemList: ['one', 'two'],
                searchInput: '',
                selected: 'one'
            }
        },
0
Mikel 28 Oktober 2019, 15:58

3 jawaban

Jawaban Terbaik

Anda tidak boleh menggunakan komponen v-select. vuetify memiliki komponen pelengkapan otomatis sendiri. buat v-autocomplete dan ikat item ke data Anda:

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

Dan inilah data skrip Anda:

  data() {
    return {
      itemList: [
        'one', 'two', 'three',
      ],
    };
  }
2
Art Mary 28 Oktober 2019, 18:48

Jika Anda menggunakan komponen vuetifyjs, silakan coba tautan berikut untuk pelengkapan otomatis

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

0
Rakesh kumar 28 Oktober 2019, 13:04

Jika Anda setuju menggunakan plugin pihak ketiga, coba plugin ini

Di bidang templat:

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

Di bidang skrip:

//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)
 }
0
KDV 14 Juli 2020, 12:59