#vue.js #autocomplete #vue-component
#vue.js #автозаполнение #vue-компонент
Вопрос:
Я столкнулся с проблемой с моим компонентом автозаполнения. всякий раз, когда я ввожу что-либо в поле ввода, ввод сбрасывается.Я имею в виду, что он не позволяет мне ничего вводить.Он просто продолжает сбрасываться, прежде чем я смогу полностью что-либо ввести.
main.js
Vue.component('g-autocomplete', {
props: ['list','value','title'],
data() {
return {
input: '',
}
},
template: `<template>
<div class="autocomplete">
<input style="font-size: 12pt; height: 36px; width:1800px; " type="text" v-model="input" @input="handleInput"/>
<ul v-if="input" >
<li v-for="(item, i) in list" :key="i" @click="setInput(item)" >
<!-- {{ autocompleteData }} -->
<template v-if="title!='manager'">
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>Description:</b>
{{item.description}}
</p>
</div>
</template>
<template v-else>
<div class="container">
<p>
<b>ID:</b>
{{item.id}}
</p>
<p>
<b>First Name:</b>
{{item.firstName}}
</p>
<p>
<b>Last Name:</b>
{{item.lastName}}
</p>
</div>
</template>
</li>
</ul>
</div>
</template>`,
methods: {
handleInput(e) {
console.log('inside handleInput')
this.$emit('input', e.target.value)
},
setInput(value) {
console.log('inside setInput')
this.input = value
this.$emit('click', value)
},
},
watch: {
$props: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
console.log('new value is' newValue)
console.log('old value is' oldValue)
console.log('value inside handler' this.value)
console.log('list inside handler' this.list)
console.log('title inside handler' this.title)
this.input=this.value
}
}
// msg(newVal) {
// this.msgCopy = newVal;
// }
}
})
я повторно использую вышеупомянутый компонент из разных страниц vue следующим образом-
<b-field label="Custom Business Unit">
<g-autocomplete v-on:input="getAsyncDataBusinessUnit" v-on:click="(option) => {updateValue(option.id,'businessUnit')}" :value="this.objectData.businessUnit" :list="dataBusinessUnit" title='businessUnit' >
</g-autocomplete>
</b-field>
моя функция debounce, которая вызывается, когда что-то вводится в поле ввода.
getAsyncDataBusinessUnit: debounce(function(name) {
if (!name.length) {
this.dataBusinessUnit = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/businessunit/?filter={id} LIKE '%${name}%' OR {description} LIKE '%${name}%'`)
.then(response => {
this.dataBusinessUnit = [];
response.forEach(item => {
this.dataBusinessUnit.push(item);
});
})
.catch(error => {
this.dataBusinessUnit = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
в чем может быть проблема? Также я заметил, что проблема не возникает, если я закомментирую тело функции debounce.Поэтому я чувствую, что в функции debounce есть что-то, что вызывает это.Я попытаюсь изолировать проблему, но я хочу понять, что именно вызывает эту проблему. Пожалуйста, помогите?
Комментарии:
1. Я не смог воспроизвести проблему, с которой вы столкнулись, проверьте эту скрипку . Но вы можете захотеть исправить следующее: 1. удалите корневой элемент=
<template>
из строки вашего шаблона. 2. используетthis.input=newValue.value
вместоthis.input=this.value
.2. проблема, похоже, где-то в функции debounce. Причиной этого являются любые изменения (операция push) или повторная инициализация массива dataBusinessUnit[]. Я не понимаю, почему, хотя, поскольку эта функция debounce отлично работает с ранее использовавшимся buefy (на основе bulma) b-автозаполнением. Теперь, когда я создал свой собственный компонент автозаполнения, метод loaddash debounce работает неправильно
3. можете ли вы попробовать использовать метод loaddash debounce для извлечения результатов из API?