Toggle each element in array does not work

Question

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 class="btn btn-info dropdown dropdown-toggle" type="button" id="setVisibility" data-mdb-toggle="dropdown" aria-expanded="false" >
   TABLE FIELD MENAGMENT 
</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:"[email protected]"
primary_phone:"0696969699"
updated_at:null

Nikola Pavicevic · Accepted Answer · 2022-07-30 08:49:27Z

1

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 class="dropdown-menu prevent-close py-1 px-2" aria-labelledby="setVisibility">
    <li class="dropdown-item">
     <div v-for="(header, index) in visibleHeaders" :key="index" class="form-check form-switch">
       <input v-model="isHidden[index]" :id="index" :value="index" class="form-check-input " type="checkbox" id="isHidden">
       <label class="form-check-label" for="isHidden">{{ header }}</label>
     </div>
    </li>
  </ul>
  <table>
    <thead class="">
      <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" class="text-center">Sorry :( No data found.</td>
      </tr>
    </tbody>
  </table>
</div>

edited Jul 30, 2022 at 8:49

answered Jul 29, 2022 at 13:57

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maison012 Over a year ago

Thanks for that. It work but only for header , I also have and a boddy. I will update my question now. I was thinking will be same for boddy but now i see it is not

Maison012 Over a year ago

Can i do same thing for boddy also?

Nikola Pavicevic Over a year ago

Hey mate, can you post structure of your arrays headers and leads, so I can try to help you?

Maison012 Over a year ago

I tryed updated answer and it work. but is any method to save this result on sessionCache?

Collectives™ on Stack Overflow

Toggle each element in array does not work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related