I have a b-table and i want to delete a column when i click and with the second click retrieve the column. I have two arrays, totalItems and showingItems. showingItems are the items that are shown in the table. I click and I delete one column. When i click in the hidden column i want to copy the column from totalItems to showingItems in order to show it on the table.

Actually my code works for deleting the column but when i try to retrieve it from one array (totalItems) and put it in other(showingItems), using map function, inside map function the array (totalItems) is undefined whereas outside map function i can print it.

Here is my full code:

<template>
  <div id="app">
  <b-table :fields="showingFields" :items="showingItems" >
      <template #cell(name)="data" >
        <div @click="clickColumn(data)">
          {{ data.value.first }} {{ data.value.last }}
        </div>
      </template>
      <template #cell(age)="data" >
        <div @click="clickColumn(data)">
          {{ data.value }}
        </div>
      </template>
      <template #cell(sex)="data" >
        <div @click="clickColumn(data)">
          {{ data.value }} 
        </div>
      </template>

      <template #head(name)="data">
    <div style="background: red" @click="clickColumn(data)">
        <span class="text-info">{{data.label}}</span>
        </div>
      </template>
      <template #head(age)="data">
      <div @click="clickColumn(data)">
        <span class="text-info">{{data.label}}</span>
        </div>
      </template>
      <template #head(sex)="data">
      <div @click="clickColumn(data)">
        <span class="text-info">{{data.label}}</span>
        </div>
      </template>
    </b-table>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
      return {
        collapsedFields: [
          { key: 'name',label: 'N', tdClass:'',thClass:'', index: 0,collapsed:true },
          { key: 'age',label: 'A' , tdClass:'',thClass:'', index: 1,collapsed:true },
          { key: 'sex', label: 'S',tdClass:'',thClass:'', index: 2,collapsed:true }
        ],
        totalFields: [
          { key: 'name', label: 'NAME', tdClass:'',thClass:'', index: 0 },
          { key: 'age', label: 'AGE', tdClass:'',thClass:'', index: 1 },
          { key: 'sex', label: 'SEX', tdClass:'',thClass:'', index: 2 }
        ],
        totalItems: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ],
        showingFields: [
          { key: 'name', label: 'NAME', tdClass:'',thClass:'', index: 0, collapsed:false },
          { key: 'age', label: 'AGE', tdClass:'',thClass:'', index: 1, collapsed:false },
          { key: 'sex', label: 'SEX', tdClass:'',thClass:'', index: 2, collapsed:false }
        ],
        showingItems: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    },
    methods: {
      clickColumn(data) {
        const column = this.showingFields.find(element => element.key == data.field.key);

        // show column
        if (column.collapsed){
          // this console log shows the array
          console.log(this.totalItems);
          this.showingItems.map( function (elem, index) {
            const field = column.key
            // here the this.totalItemss[index] doesnt work
            // you can replace this line with console.log(this.totalItems[index]) and it will fail too
            elem[field] = this.totalItems[index][field]
          })
          this.showingFields.splice(column.index,1,this.totalFields[column.index]);
          this.showingFields[column.index].collapsed=true;
        }
        // hide column
        else {
          this.showingItems.map( function (elem) {
            delete elem[column.key] 
          })
          this.showingFields[column.index].collapsed=true;
        }
          this.showingFields.splice(column.index,1,this.collapsedFields[column.index]);
          
        
      }

    }
}
</script>

<style>
</style>
´´´

CodePudding user response：

When you use function() {} the scope of this changes.

You need to use () => {} instead, so that this remains unchanged.

      this.showingItems.map((elem, index) => {
        const field = column.key
        elem[field] = this.totalItems[index][field]
      })