Toggle each element in array does not work-CodePudding

I have a table in Vue js which I fill with data from the back-end. I copy the entire db structure as an object and display it in vue js as it is with all the fields. Now I'm stuck somewhere, more precisely I want to have a management of the fields of the table by deciding whether I want to display or not in the table. I made a function that works but not as expected, can someone help me to develop it properly?

<button  type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false" >
   TABLE FIELD MENAGMENT 
</button>
  <ul  aria-labelledby="setVisibility">
    <li>
     <div >
     <h6>Hide/Show</h6>
     </div>
     <div v-for="(header, key, index) in visibleHeaders" :key="key" >
       <input v-model="isHidden" :value="key"  type="checkbox" id="isHidden">
       <label  for="isHidden">{{header}}</label>
     </div>
    </li>
  </ul>

<thead >
<tr>
   <th><input type="checkbox"  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"  v-model="selected" :value="column.id" />
  </td>
  <td v-for="(atr, index) in column">
    {{atr}}
 
</tr>
<tr v-show="!leads.length">
 <td colspan="12" >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:"[email protected]"
primary_phone:"0696969699"
updated_at:null

CodePudding user response：

If I understood you correctly try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      isHidden: [],
      headers: [{Field: 'a', isHidden: false}, {Field: 'b', isHidden: false}, {Field: 'c', isHidden: false}],
      selectAll: false,
      leads: [['aa', 'bb', 'cc'], ['aa', 'bb', 'cc']],
      selected: null
    }
  },
  computed: {
    visibleHeaders() {
      return this.headers.map(h => {
        return h.Field.replace("_", " ").toUpperCase()
      });
    },
  },
  mounted() { 
    this.isHidden = this.headers.map(h => !h.isHidden) 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul  aria-labelledby="setVisibility">
    <li >
     <div v-for="(header, index) in visibleHeaders" :key="index" >
       <input v-model="isHidden[index]" :id="index" :value="index"  type="checkbox" id="isHidden">
       <label  for="isHidden">{{ header }}</label>
     </div>
    </li>
  </ul>
  <table>
    <thead >
      <tr>
        <th v-if="isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
           {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-show="leads.length" v-for="column in leads" >
        <td v-for="(atr, index) in column" >
          <div v-if="isHidden[index]" >
            {{ atr }}
          </div>
        </td>
      </tr>
      <tr v-show="!leads.length">
        <td colspan="12" >Sorry :( No data found.</td>
      </tr>
    </tbody>
  </table>
</div>