Convert from jQuery to Vue?

Question

I would like to transform the following code which is in javascript:

$('a').click(function() {
    $(this).find('i').toggleClass('fa-heartbeat');
});

in vue.js.

function name: like

Please, edit your question to tell the community what you have tried so far. What's your problem on converting this code. — Sebastian D'Agostino
– Sebastian D'Agostino, Commented Aug 7, 2019 at 23:33
So I try to convert the code, but it won't. Inside my method: {} I created: like: function () {find ('i'). ToggleClass ('fa-heartbeat')}, but I don't look for the function, and I need an ID in that function called: like — AnkFlix
– AnkFlix, Commented Aug 7, 2019 at 23:40
You can click on the 'Edit' button below your question to add that — Sebastian D'Agostino
– Sebastian D'Agostino, Commented Aug 7, 2019 at 23:41

tony19 · Accepted Answer · 2022-07-15 00:37:20Z

In Vue, you typically don't select and manipulate DOM elements directly, you rather bind data to parts of the markup within your Vue components.

That said: You don't even need a function for that. Simply

add a data element that indicates which state the icon is in (see https://v2.vuejs.org/v2/guide/#Declarative-Rendering)
change its value in the @click handler of the surrounding a, see https://v2.vuejs.org/v2/guide/events.html#Listening-to-Events
conditionally bind the fa classes based on the state to the icon, see https://v2.vuejs.org/v2/guide/class-and-style.html

 <a href="#" @click="liked = !liked">
   <i :class="['fa', liked ? 'fa-heartbeat' : 'fa-plus-circle']"></i>
 </a>

When looking at the vue docs, note that @click in the example is a shortcut for v-on:click and :class for v-bind:class.

1 Answer 1