What if the v-on:click event is applied to the wrong element?

Question

What if the v-on:click event is applied to the wrong element?

I'm attempting to manipulate the anchor tag with jQuery by changing its color when clicked, but I'm struggling to correctly target it.

<a v-on:click="action($event)">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

The event.target in action always refers to either the first or second span within the anchor tag, rather than the actual anchor tag itself.

For instance:

$( $event.target ).css( "backgroundColor", "red" )

Whenever I click on the "a" tag, one of the spans will change to red instead of the "a" tag that has the v-on:click directive. Is there a way to specifically target the element with the click directive?

javascript vue.js

Answer 1

Answer №1

Do not use $event.target, instead, utilize $event.currentTarget. Then proceed to apply your style to the a tag.

new Vue({
  el: "#app",
  methods: {
  action: function($event){
    $($event.currentTarget).css( "backgroundColor", "red" )
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
  <a v-on:click="action($event)">
    <span>entry 1</span>
    <span>entry 2</span>
  </a>
</div>

Answer 2

Do not use $event.target, instead, utilize $event.currentTarget. Then proceed to apply your style to the a tag.

new Vue({
  el: "#app",
  methods: {
  action: function($event){
    $($event.currentTarget).css( "backgroundColor", "red" )
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
  <a v-on:click="action($event)">
    <span>entry 1</span>
    <span>entry 2</span>
  </a>
</div>

Answer 3

Answer №2

Have you considered using jQuery along with vuejs? Instead, utilizing the full potential of vuejs can lead to a solution like this:

.clicked {
  background-color: red;
}

<a v-on:click="aClicked = true" :class="{ 'clicked': aClicked }">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

Answer 4

Have you considered using jQuery along with vuejs? Instead, utilizing the full potential of vuejs can lead to a solution like this:

.clicked {
  background-color: red;
}

<a v-on:click="aClicked = true" :class="{ 'clicked': aClicked }">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

What if the v-on:click event is applied to the wrong element?

Answer №1

Answer №2

Similar questions

The loading time for the Ajax request is unreasonably slow

Knockout Observable Array causing UI to freeze and not refresh properly

Comparison: JavaScript Cookies vs PHP Cookies

Guidelines for transforming an HTML string into a JavaScript document

Enzyme in Action: Using React.js to Emulate a Click Event

JavaScript validation code for verifying hostnames with a specified domain name

When attempting to showcase an MUI icon that was imported, I encounter the following issues: Invalid hook call and the <ForwardRef(SvgIcon)> component

Guide to crafting a reply using nestjs exception filters with nestfastify

A step-by-step guide on utilizing NuxtLink to successfully pass data between pages

Implementing AngularJS table filters on user click

Deploying a static website using Node.JS without relying on any frameworks

The value of Component.name is not consistent during the BUILD process in NextJS

When converting to .glb format, the material becomes invisible unlike in .gltf files

WebWorker - Error in fetching data from server using Ajax call

Is it possible to dynamically load an npm package based on the user's browser?

Verifying file types with HTML5 drag and drop feature

Tips for accessing the URL in PhoneGap and parsing the response with jQuery

Transferring the AJAX response into a JavaScript variable

Send information as FormData object

How do I rearrange the order of a collection in Firestore using a reference that I already have?