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

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

• javascript
• vue.js
• vuejs2
• onclick
• blur

• 1 It looks fine to me. Did you breakpoint setSelectedToQuery to make sure it actually isn't entering the function? There are no errors on the console right? – user120242 Commented Apr 29, 2020 at 18:44
• Does a click event works in inner spans in 'a' tag? – Anatoly Commented Apr 29, 2020 at 18:44
• Also, are you using .stop to prevent bubbling or preventing default anywhere above the ponent? – user120242 Commented Apr 29, 2020 at 18:45
• @user120242 yeah I'm trying to catch it with alerts & console.logs but yeah.. nothing and no, I'm not using .stop – Furkan Selcuk Commented Apr 29, 2020 at 18:49
• @Anatoly nope, same result => nothing.. :/ – Furkan Selcuk Commented Apr 29, 2020 at 18:50

2 Answers 2

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.

Maybe it's the solution: close your last span

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