Блог

Главная - Вопросы по программированию - v-combobox, странное поведение

v-combobox, странное поведение

#vuetify.js

#vuetify.js

Вопрос:

У меня странная проблема с моим v-combobox, которую трудно объяснить, но я буду стараться изо всех сил.

Когда я начинаю вводить в поле со списком, «список» фильтруется, и если я нажимаю один из пунктов в выпадающем меню, все в порядке.

Проблема возникает, если я нажимаю элемент, а затем добавляю другую букву и напрямую нажимаю кнопку отправки в своей форме, новые символы в моем поле со списком не передаются в мой запрос axios. Если я вместо этого переключусь на другое поле, вся информация в моем combobox передается в запрос axios.post.

Но самое странное, что если я поставлю:

 console.log(this.shortname)

Выходные данные содержат все символы в combobox, но не в запросе axios.post.

Ниже приведен мой код.

 // TEMPLATE
<v-combobox v-model="shortname" color="forms" :items="shortnames" autocomplete="off"></v-combobox>


// SCRIPT
sendForm(){
   console.log(this.shortname)
   axios.post('/endpoint, {
                shortname: this.shortname
            })
            .then((response) => {})
}

Итак, в функции sendForm (), если я введу «Richa» в поле со списком и щелкну по списку «Richard»,

  console.log(this.shortname) // outputs "Richard" and so will axios request

Но если я наберу «Richa» и щелкну по списку «Richard», а затем ДОБАВЛЮ «sdf» (Richardsdf)
,

  console.log(this.shortname) // outputs "Richardsdf" but axios request is still "Richard"

Однако, если я изменю поля после добавления «sdf», в axios.post будет «Richardsdf»

Я использую vuetify версии 2.4.2 и такое же поведение в Chrome и Safari

Мой вопрос в том, есть ли способ получить всю добавленную информацию в combobox без необходимости изменять поля ввода?

// С наилучшими пожеланиями.

Ответ №1:

Найдено решение.

Я добавил id=»targetInput» и @update:search-input=»updateTargetInput» и удалил v-model в combobox

  <v-combobox id="targetInput" @update:search-input="updateTargetInput" :items="shortnames" outlined :rules="shortnameRules"></v-combobox>

и в методах, которые я добавил

  methods: {
 updateTargetInput(currentValue){
        this.shortnameone = currentValue
        console.log(this.shortnameone)
    },
 }

Кредиты идут Прадипнуни
https://github.com/vuetifyjs/vuetify/issues/4679#issuecomment-682456398

Метки: