I recently started using Vue for my frontend project and I am facing a challenge. I am trying to dynamically add classes to my table based on user input. Currently, I am able to add only one class, but I want to extend this functionality to work with an array of classes. Can anyone provide some guidance on how to achieve this?
Additionally, I would like to include more input options for adding other classes such as 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));
},
I am looking for a solution that allows me to have multiple classes in an array like this:
data() {
return {
smallTable: [
{smTable: "", active: false,},
{bordertable: "", active: false,}
]
}
}