Tengo una entrada de autocompletar, y cuando hago clic en un elemento, hace algo. Para propósitos de simplificación, la cosa está aquí " console.log(element) ". Lo que pasa es que cuando hago clic en un elemento, la entrada se vuelve borrosa, y la entrada borrosa destruye los elementos de la lista. Si espero unos milisegundos, se maneja el evento de clic, pero si no, solo tiene en cuenta el evento de desenfoque. Hice un ejemplo con las dos opciones:
var app = new Vue({ el: '#app', data: { list: ['1', '2'], }, methods: { handleBlurWithPause: async function () { await new Promise((r) => setTimeout(r, 300)); console.log('Blurred with pause'); this.list = []; }, handleBlur: function () { console.log('Blurred'); this.list = []; }, handleClick: function (e) { console.log(e); }, resetList: function () { this.list = ['1','2']; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input placeholder="With pause" type="text" @blur="handleBlurWithPause" /> <input placeholder="Without pause" type="text" @blur="handleBlur" /> <ul> <li v-for="elt in list" @click="handleClick(elt)"> {{ elt }} </li> </ul> <button @click="resetList"> Reset </button> </div>Mi pregunta es: ¿hay una mejor manera de esperar el evento de clic antes de manejar el evento de desenfoque? La línea async/await me parece muy amateur.
Gracias por adelantado.