CODEWITHSUNDEEP
javascriptvue.js
azakura
azakura

Reputation: 37

How to trigger element in vue js?

It works, but I need to click the button twice before the function triggers.
How can I make it when I click once it triggers the function?

export default {
  methods: {
        
    remove(){
      $('.remove-me button').click( function() {
        removeItem(this);
      }); 
        
      function removeItem(removeButton) {
        var productRow = $(removeButton).parent().parent();
        productRow.slideUp(fadeTime, function() {
        productRow.remove();
        recalculateCart();
      });
    }
    
  }  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="remove-me">
    <button type="button" @click="remove">Remove</button>
  </div>
</template>

Upvotes: 0

Views: 338

Answers (2)

anjarwidi83
anjarwidi83

Reputation: 496

There is already a good sample for deletion item in https://v2.vuejs.org/v2/guide/list.html#Caveats

You don't need jquery for this. This code was simplified version from the link above

In HTML:

  <ul>
    <li v-for="(todo, index) in todos" :key="index" >
      <button @click="todos.splice(index, 1)">Remove {{ todo }}</button>
    </li>
  </ul>

Add some todo in data inside <script> :

 data: {
    todos: ["one", "two", "three"]
 }

You write jquery to manipulate DOM. In Vue data will render the DOM for you.

Sample : https://codesandbox.io/s/twilight-darkness-jpbd8

Upvotes: 0

rx2347
rx2347

Reputation: 1073

You dont need jquery in there, the remove function is triggered without it by adding the @click to the button.

More Info: https://v2.vuejs.org/v2/guide/events.html

Upvotes: 1

Related Questions