CODEWITHSUNDEEP
javascriptvue.jsvuejs2onclickblur
Furkan Selcuk
Furkan Selcuk

Reputation: 55

@click event not triggering alongside element with @blur

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

Upvotes: 2

Views: 2613

Answers (2)

Abel Andouard
Abel Andouard

Reputation: 33

Maybe it's the solution: close your last span

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

Upvotes: 1

Daniel
Daniel

Reputation: 35684

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.

Upvotes: 7

Related Questions