Button Toggle to choose Div´s class
-
I have a Button Toggle with 5 buttons (1-5, v-model: “option”) and a DIV.
I would like to choose the class for this DIV (changing color and size) based on the option chosen in the button togggle.
How would be a good way to do this?
Thank you -
A computed value in your div’s class attribute and the 5 css classes that denote the differences maybe? Or does the values in the css have to be dynamic?
Scott
-
@s-molinari thanks for the response.
Doesn’t have to be dynamic, css classes will do fine.
The thing is, I am very new to quasar and vue, i know what computed properties are, just don’t know how to put all together?
1- at the button toggle i should use @input to call a function (myComputedproperty).
2- at the Computed section, in “myComputedproperty” i should use a switch to choose from the model: “this.Options”
3- on each “case” call the apropriate div class.
is that it? -
You don’t need methods, if all you are doing is toggling a boolean. Other than that, then yes, you are on the right track. Try and build a codepen with what you’d like to do.
Scott
-
@s-molinari
Done!
https://codepen.io/sergioprof/pen/wvzEovJ
My question was initialy about changing one div class for another, as I started to play in codepen, things got fun, i ended up doing the whole behavior i wanted.
Thank you!
Cheers -
@arqsergio Here’s the more vue way to do it, and what scott was hinting at: https://codepen.io/pianopronto/pen/wvzEoYm . What it’s doing is binding a dynamic classname to the two divs based on the model value. No DOM manipulations needed.
-
@beets
That works perfectly, thank you. It solved yet another problem I was facing, as the toolbar and the divs were in different components, so my first atempt wasn’t working.
Cheers
