CODEWITHSUNDEEP
vue.jsvuejs3
Eldar Tailov
Eldar Tailov

Reputation: 378

Vue 3 Composition API component doesn't work reactivate class

I have a button and I just want it animate on a click - make as it been pressed. It works if I make optional component as below:

<template>
          <button class="button" :class="{'shadow__click': classButton}" @click="buttonClass">
            Tell me already!
          </button>
</template>
    
<script>

export default {
  data(){
    return {
     classButton : false
    }
  },
  methods: {
    buttonClass(){
      this.classButton = true;
      setTimeout(() => {
        this.classButton = false
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.button{
    cursor: pointer;
    padding: 12px 24px;
    position: relative;
    border-radius: 5px;
    background-color: #38b2ac;
    border: none;
    color: #fff8e1;
}

.shadow__click{
  animation: click 1s
    }

@keyframes click {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 5px;
    left: 1px;
  }
  50% {
    top: 10px;
    left: 3px;
  }
  75% {
    top: 5px;
    left: 1px;
  }
  100% {
    top: 0;
    left: 0;
  }
}
</style>

but it doesn't want to work when I do Composition way and I don't see a problem but it simply doesn't work (( I console.loged function and it goes to function changes the value of a variable, but class is not applying. Is it a Vue 3 bug?

<script>
 import { ref } from "vue"

       setup(){
      
         let classButton = ref(false);
         function buttonClass(){
           classButton = true;
           setTimeout(() => {
             classButton = false
           }, 1000)
         }
      
         return { classButton, buttonClass}
           }
    </script>

Upvotes: 0

Views: 805

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should mutate the ref using the value field :

    let classButton = ref(false);
         function buttonClass(){
           classButton.value = true;
           setTimeout(() => {
             classButton.value  = false
           }, 1000)
         }

Upvotes: 1

Related Questions