Vue js 3 use multiple custom classes on table dynamically-CodePudding

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 >
  <input v-model="smallTable.active" type="checkbox"  id="smallTable" @change="tableStyles()">
  <label  for="smallTable">
    Small Table
  </label>
</div>

//Table tag
<table  :>
...

//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,}
         ]
      }
}

CodePudding user response：

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.

CodePudding user response：

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