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,}
]
}
}
There are two approaches:
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));
},
// 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.