Vue js 3 use multiple custom classes on table dynamically

Question

I am working on a project where i use vue for my frontend, but i am new on vue. And i am trying to add some dynamically class on my table. So for example where i check table-sm table will assing this class. Already i have done this but it work only with one class. I really dont know how to do this to work with an array. Can someone help ?

I want also to add another input for other classes EX: table-bordered and table-striped ...

<div class="form-check form-switch">
  <input v-model="smallTable.active" type="checkbox" class="form-check-input" id="smallTable" @change="tableStyles()">
  <label class="form-check-label" for="smallTable">
    Small Table
  </label>
</div>

//Table tag
<table class="table table-hover align-middle mb-0" :class="smallTable.smTable">
...

//vue component
data() {
        return {
        smallTable: {smTable: "", active: false,},
      }
}

tableStyles() {
            if (this.smallTable.active) {
                this.smallTable.smTable = "table-sm"
            }else {
                this.smallTable.smTable = ""
            }
            localStorage.setItem("tableStyle", JSON.stringify(this.smallTable));
        },

what i am loking for is something like this:

data() {
        return {
        smallTable: [
          {smTable: "", active: false,},
          {bordertable: "", active: false,}
         ]
      }
}

It's easy! just put your classes in a row this.smallTable.smTable = "table-sm table-class2 tbl-class3" — Raeisi
– Raeisi, Commented Aug 10, 2022 at 7:48
No, manybe you missunderstood me .I dont want this. I want multiple input type="checkbox" where i can chose different classe i want to add on my table. One checkbox for table-sm one for table-bordered and some other class maybe — Maison012
– Maison012, Commented Aug 10, 2022 at 7:52
I fixed my answer. It gives you the idea. Use your real names instead, please. — Raeisi
– Raeisi, Commented Aug 10, 2022 at 7:59

Raeisi · Accepted Answer · 2022-08-10 09:07:50Z

1

There 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 (this.checkbox2.active) {
    this.smallTable.smTable += ' table-hover';
  }
  localStorage.setItem('tableStyle', JSON.stringify(this.smallTable));
},

Using an object of classes by according boolean switch

// You are supposed to create an object
// whose keys are the class names and
// values are boolean showing how a class should apply or not.

tableStyles() {
  this.smallTable.smTable = {
    'table-sm':       this.smallTable.active,
    'table-bordered': this.checkbox1.active,
    'table-hover':    this.checkbox2.active,
  };
  localStorage.setItem('tableStyle', JSON.stringify(this.smallTable));
},

It gives you the idea of how to set classes dynamically. Please tune conditions according to your actual data.

edited Aug 10, 2022 at 9:07

answered Aug 10, 2022 at 7:53

Raeisi

2,2311 gold badge11 silver badges25 bronze badges

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

8 Comments

Maison012 Over a year ago

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

Raeisi Over a year ago

So, in this case, you need to use Radio Buttons instead of Checkboxes.

Maison012 Over a year ago

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

Raeisi Over a year ago

Imagine a situation where every 3 checkboxes are active. Which classes do you want to apply to?

Maison012 Over a year ago

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

|

RenaudC5 · Accepted Answer · 2022-08-10 08:12:19Z

0

you can use ternary condition in class binding to binding multiple class for an element read more abou it here

edited Aug 10, 2022 at 8:12

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

answered Aug 10, 2022 at 7:51

Moein Mousavipour

11 bronze badge

2 Comments

Maison012 Over a year ago

Can you do an example with mu code? I am not understanding how it work. I need to add multiple input but for differenc classes

Moein Mousavipour Over a year ago

So I probably did not understand your question correctly

Collectives™ on Stack Overflow

Vue js 3 use multiple custom classes on table dynamically

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related