Событие @click не запускается рядом с элементом с @blur

Question

У меня есть проблема при работе с VueJS, которая как бы действует на мои нервы, так как я знаю, что это, вероятно, зависит от чего-то очень маленького, но я все еще пытаюсь заставить его работать часами.

Я использую шаблон, который должен представлять панель поиска с решениями под ним. Чтобы показать решения, я зацикливаюсь на объекте (я не закончил, включая фильтрацию решений к этому моменту - хотел закончить sh этот первый). Теперь я пытался заполнить значение панели поиска значением, которое я выбрал в решениях (передав его с помощью события click). Но почему-то мое событие щелчка не срабатывает.

У меня есть следующий фрагмент кода:

<template>
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">&#128269;</div>
        </div>
        <input 
            type="text" 
            class="form-control"
            @focus="searchFocus = true"
            @blur="searchFocus = false"
            v-model="searchQuery"
            placeholder="Search for vehicles..">
        <div class="container p-0">
            <div class="dropdown-menu search" v-show="searchFocus">
                <a class="dropdown-item bus" href="#" 
                    v-for="vehicle in vehicleObjects" 
                    :key="vehicle.id.key"
                    v-on:click="setSelectedToQuery(vehicle)">
                    <span class="ml-4">Bus {{ vehicle.id.name }}
                        <span class="badge badge-secondary"> {{ vehicle.licenseNumber }}</span>
                    <span>
                </a>
            </div> 
        </div>
    </div>
</template>

Я что-то упускаю из виду? Как я могу запустить / запустить событие click?

Заранее спасибо

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

Answer 1

Есть несколько вещей, которые «выключены», я перечислю их по уровню воздействия.

• @blur стреляет перед щелчком, по существу аннулируя @click
• якоря <a ...> нужно предотвратить перенаправление. Вы можете использовать @click.prevent="..., чтобы предотвратить распространение события, или использовать другой элемент, поскольку у вас все равно не определено href.
• один из ваших элементов span не закрыт (<span> вместо </span в конце)

Чтобы обработать @blur блокировку @click, вы можете использовать @mousedown вместо @click, поскольку он выполняется первым.

Answer 2

Может быть, это решение: закройте ваш последний промежуток

Нажмите на работу для меня: https://codesandbox.io/s/morning-browser-fgftf