vuejs dynamically adding class

Question

Using vuejs 3. In the vuejs app, I have:

data(){
    return{
        return_prohibited:false
    }
}

return_prohibited turns to true when the server returns an error message from a fetch request:

fetch(myUrl,this.myInit)
     .then(response => response.json())
     .then(data => {
          if (data.message) {
              this.credits = []
              this.debits = []
              return_prohibited = true
         } // cut for brievity

Html file:

<button @click="previousMonth" id="bouton_mois_prec" :class="{interdit:return_prohibited}" >précédent</button>

I was expecting that the css class interdit would be added to the button each time that return_probibited is true, as per these explanations. But nothing happens.

What changes return_prohibited?

Ergec
– Ergec

2021-03-07 17:01:39 +00:00
Commented Mar 7, 2021 at 17:01 — Ergec
– Ergec, Commented Mar 7, 2021 at 17:01
I have updated the question with this.

thiebo
– thiebo

2021-03-07 17:08:48 +00:00
Commented Mar 7, 2021 at 17:08 — thiebo
– thiebo, Commented Mar 7, 2021 at 17:08

IVO GELOV · Accepted Answer · 2021-03-07 17:22:40Z

1

You should append this. in front of return_prohibited - otherwise you will get errors in the console.

answered Mar 7, 2021 at 17:22

IVO GELOV

14.3k1 gold badge21 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

vuejs dynamically adding 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