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

javascript test: https://jsfiddle.net/jsk590ep/

Answer 1

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.

Working example here: https://codesandbox.io/s/stack-overflow-q-57403395-ul62e?module=/src/App.vue