mesqueeb's avatar

How to set timeout for class binding with VueJS?

I have some buttons inside a Vue v-for list of items. Every time I click on one I want to briefly add a class for a special CSS click effect. I added this easily with jQuery. But how would I do this with just Vue?

$('body').on('click','.btn',function(){
let $ele = $(this);
$ele.addClass("btn--click");
setTimeout(function(){
    $ele.removeClass("btn--click");
}, 400);
});

This is my list of items:

<div class="timer slider" id="timer-@{{ item.id }}"
    v-for="item in timerItems"
>
    <button class="play btn btn-dipclick"
        @click="playTimer(item, this)"
    ><i class="zmdi zmdi-play"></i>
    </button>
0 likes
3 replies
tisuchi's avatar

Inside your method, you can simply add this line-

setTimeout(this.yourMethodNameThatYouWantToCallAfterEach1Sec, 1000);
2 likes
z1haze's avatar

@mesqueeb did you figure this out? I have to do something very similar now. I'm not sure if the first reply works. If it does, can you elaborate on it, because I am not understanding it?

<div v-for="coord in handles" class="handle" :style="getHandleStyle(coord)">
    <div class="delete-point"></div>
</div>

In my particular case I need to add a class to the .handle element on mousedown and then on mouseup i need to set a timeout to remove that class from .handle

z1haze's avatar

I ended up coming up with a solution that works, I dont know if its the best way to do it, but here's what I did.

<div @mousedown="showDelete($event)" @mouseup="removeDelete($event)" v-for="coord in handles" class="handle" :style="getHandleStyle(coord)">
    <div class="delete-point"></div>
</div>



.......


methods: {
      showDelete (evt) {
        let el = evt.target

        el.classList.add('show-delete')
      },

      removeDelete (evt) {
        let el = evt.target

        setTimeout(() => {
          el.classList.remove('show-delete')
        }, 3000)
      }
    }

Please or to participate in this conversation.