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

What is the best way to send $(this) to a function?

Would you prefer to generate fresh HTML using JavaScript or dynamically load an existing HTML layout using AJAX?

Calling a C# Webmethod using jQuery AJAX is not working as expected

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

What is the best way to recycle a variable in TypeScript?

Leveraging the power of Bootstrap and JavaScript to implement a custom Toast feature

Effective ways to resolve the ajax problem of not appearing in the console

How to retrieve TypeScript object within a Bootstrap modal in Angular

The font size of the textarea dynamically adjusts based on the size of the screen

Store the Ajax response in localStorage and convert it into an object for easy retrieval and manipulation

The second node child process encounters execution issues in Linux

Position the read more buttons in JavaScript at the bottom of the div

Allowing the contenteditable attribute to function only on a single line of

Guide: Generating a DIV Element with DOM Instead of Using jQuery

Creating a delay in a test to ensure a 5-second wait before validating the appearance of an element using React testing library

"The Django querydict receives extra empty brackets '[]' when using jQuery ajax post to append items to a list in the app

Maintaining hover effects even when elements are not in view

Activating a tab using a JS call in Bootstrap with the data-toggle attribute

What is an alternative approach to passing arguments to an event handler in a React render component without using a lambda function?

The React Functional Component undergoes exponential re-renders when there is a change in the array