I have a problem in removing the whole column and its corresponding row in vue-table.
Here is my code.

<b-table :fields="fields" :items="data">



    <template slot="action" slot-scope="data" v-if="authorize = 1">



    </template>



</b-table>







export default{

    data(){

       authorize: 0,

       data: ,

       fields: [

          {key: 'id', label: '#'},

          {key: 'name', label: 'Name'},

          {key: 'action', label: 'Action'}

        ],

   }

}

This is the original table:

| # | Name                    | Action |

----------------------------------------

| 1 | John Doe                | Delete |

| 2 | Chicharon Ni Mang Juan  | Delete |

| 3 | Lumanog                 | Delete |

In this case, When I use v-if inside the <template> it only removes the data in the column.

This is the result of the code above

| # | Name                    | Action |

----------------------------------------

| 1 | John Doe                |        |

| 2 | Chicharon Ni Mang Juan  |        |

| 3 | Lumanog                 |        |

What I want is to remove the whole column itself like this.

| # | Name                   |

------------------------------

| 1 | John Doe               | 

| 2 | Chicharon Ni Mang Juan | 

| 3 | Lumanog                | 

Regards,

With vue-tables-2 I don't think there's any other choice but to have conditional for different column sets, like in computed. For example:

computed: {

 fields: function() {

  let fields = [{key: 'id', label: '#'}, {key: 'name', label: 'Name'}]

  if (this.authorize === 1) {

    fields.push({key: 'action', label: 'Action'})

  }

  return fields

 }

}

I just found a simple solution by not using the table on this way:

<b-table :fields="fields" :items="data">

     <template slot="action" slot-scope="data" v-if="authorize = 1">

      </template>

</b-table>

I just used this simple html table:

<table class="table" style="width:100%">

    <thead>

        <tr>

            <th>#</th>

            <th>Name</th>

            <th v-if="authorize == 1">Action</th>

        </tr>

    </thead>

    <tbody>

        <tr v-for="user in data">

            <td>{{ user.id }}</td>

            <td>{{ user.name }}</td>

            <td v-if="authorize == 1">

                 <button variant="primary">Delete</button>

            </td>

        </tr>

    </tbody>

</table>

Here, I can easily manipulate to remove/show the column and its data.

Thanks!