last day (15 days later) » 

9:31 AM
0
A: Vue js 3 use multiple custom classes on table dynamically

Mr. RThere are two approaches: Using a string of classes that separated by space tableStyles() { this.smallTable.smTable = ''; if (this.smallTable.active) { this.smallTable.smTable += ' table-sm'; } if (this.checkbox1.active) { this.smallTable.smTable += ' table-bordered'; } if (...

 
So if i do this, where i check the checkbox 3 this classes will add on my table tag. But this is not what i want. I want multiple checkbox, For example: 3 input checkbox will have each by this class, so when i click first checkobx i want to assing only first class, not all 3 cass
 
So, in this case, you need to use Radio Buttons instead of Checkboxes.
 
I dont waht to use radio couse maybe i need to check multiple classes, ex: table-sm and table-bordered in same time. But this should be with 2 differend checkboxes. I have updated my questions
 
Imagine a situation where every 3 checkboxes are active. Which classes do you want to apply to?
 
If 3 checkboxes are active: table-sm, table-bordered, table-hover. I think this is a good combination. I just want to let users to personalize his table, so this is the reason i save this on localstorage
 
9:31 AM
OK. I tuned class names in the answer. Another question: How do you detect that checkboxes are active? For example, this this.smallTable.active shows me the state of the first check box. I'm looking for the state of other checkboxes.
 
input v-model="smallTable.active" can do this
 
v-model="smallTable.active It shows one of three states! Right?
When do you want to apply the table-bordered class?
What is your if condition?
 
9:51 AM
I did not know what should i do to make this to work as i want. But now i think i found a solution i will post on my question
 
10:08 AM
smallTable.active it is a boolean value right?!
Your answer is a copy of mine bro
have fun
by
bye
 
10:26 AM
i just dont understand your answer. Then i will make your answer as soluion
But if you can. Can you help e with another topic?
this is a problem where i really have problem on my project
 

last day (15 days later) »