I am working on a Vue.js project where I have a table filled with data from the back-end. Currently, all the fields are displayed in the table as they are copied from the database structure object. However, I want to add functionality to manage which fields are displayed in the table. I have created a function for this purpose, but it is not working as expected. Can someone assist me in properly developing this feature?
<button class="btn btn-info dropdown dropdown-toggle" type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false" >
TABLE FIELD MENAGEMENT
</button>
<ul class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
<li>
<div class="layout-header pt-2 text-center">
<h6>Hide/Show</h6>
</div>
<div v-for="(header, key, index) in visibleHeaders" :key="key" class="form-check form-switch">
<input v-model="isHidden" :value="key" class="form-check-input " type="checkbox" id="isHidden">
<label class="form-check-label" for="isHidden">{{header}}</label>
</div>
</li>
</ul>
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-if="!isHidden" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr v-show="leads.length" v-for="column in visibileColumn" >
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-for="(atr, index) in column">
{{atr}}
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
...
data() {
return {
isHidden: false,
headers: [],
leads: [],
...
}
}
computed: {
visibleHeaders() {
return this.headers.map(h => {
h.isHidden = true
return h.Field.replace("_", " ").toUpperCase()
});
},
visibileColumn() {
return this.leads.map(c => {
// console.log(c)
return c
})
},
}
headers:Array[9]
0:Object
Default:null
Extra:"auto_increment"
Field:"id"
Key:"PRI"
Null:"NO"
Type:"bigint unsigned"
isHidden:undefined
leads:Array[5]
0:Object
created_at:null
first_name:"john"
id:6
last_name:"doe"
lead_status:"new"
notes:null
primary_email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9d3d6d1d7ddd6dcf9ded4d8d0d597dad6d4">[email protected]</a>"
primary_phone:"0696969699"
updated_at:null