Vue 3 Composition API component doesn't work reactivate class

Question

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>

You can read about reactivity in the doc v3.vuejs.org/guide/… — laurisstepanovs
– laurisstepanovs, Commented Dec 17, 2020 at 11:06

Boussadjra Brahim · Accepted Answer · 2020-12-17 11:15:05Z

1

You should mutate the ref using the value field :

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

edited Dec 17, 2020 at 11:15

answered Dec 17, 2020 at 11:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 Composition API component doesn't work reactivate class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related