@click 事件不会与带有 @blur 的元素一起触发

Question

I've got a problem when working with VueJS which is kinda getting on my nerfs since I know that it probably relies on something very small but still I'm here trying to get it running for hours.

I'm using a template which should represent a searchbar with the solutions under it. To show the solutions, I'm looping over an object (I'm not done including the filtering of the solutions to that point - wanted to finish this one first). The thing I was trying to do now was filling in the searchbar value with the value I select in the solutions (passing it with a click event). But somehow my click event doesn't trigger.

I've got the following code-snippet:

<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>

Am I missing something quite obvious? How can I get the click-event running/triggering?

Thanks in advance

Best Regards

Answer 1

There are few things "off" I'll list them by level of impact

• @blur fires before click, essentially invalidating @click
• anchors <a...> need to prevent redirect. You can use @click.prevent="... to prevent event propagation, or use another element, since you don't have href defined anyway.
• one of your span elements is not closed ( <span> instead of </span at the end)

To handle @blur blocking @click , you could use @mousedown instead of @click , since it executes first.

Answer 2

Maybe it's the solution: close your last span

Click work for me: https://codesandbox.io/s/morning-browser-fgftf