toggle show/hide table column and save to localstorage in vue

Question

I would like to show and hide table column dynamically with checkbox and save it the option to localstore in vue 2. I find a jquery version but when I tried to use it did not worked. I am a beginer in vue. Thank you for your help.

My vue table:

    export default {
    extends: axiosGetPost,
    props: ['id','tab_name', 'route_name'],
    data() {
        return {
            hidePreLoader: true,
            price: '',
            purchase_price: '',
            selling_price: '',
            products: {},
            tableOptions: {
                tableName: 'products',
                columnSelect : true,
                columns: [
                    {
                        title: 'lang.item_image',
                        key: 'image',
                        type: 'images',
                        source: '/uploads/products',
                        imagefield: 'imageURL',
                        sortable: false
                    },
                    {title: 'lang.sku', key: 'sku', type: 'text', sortable: true},
                    {title: 'lang.sku_2', key: 'sku_2', type: 'text', sortable: true},
                    {title: 'lang.sku_3', key: 'sku_3', type: 'text', sortable: true},
                    {title: 'lang.sku_4', key: 'sku_4', type: 'text', sortable: true},
                    {title: 'lang.attribute_values', key: 'attribute_values', type: 'text', sortable: true},
                    {title: 'lang.quantity', key: 'test', type: 'text', sortable: true},
                    {title: 'lang.selling_price', key: 'selling_price', type: 'text', sortable: true},
                    {title: 'lang.receiving_price', key: 'purchase_price', type: 'text', sortable: true},
                ],
                formatting : ['selling_price','purchase_price'],
                source: '/products/variantDetails/' + this.id,
            },
        }
    },

I run out of ideas. Thank you for your help.

Answer 1

For this you need to set defaults so that the checkbox values first try to read from localStorage. Then create a method when the input is clicked to change the value and update the value set into storage.

Vue.use(VueTables.ClientTable);

new Vue({
    el: "#app",
    data: {
        columns: ['name', 'code'],
        columnHidden: {
            name: localStorage.getItem('name') || false,
            code: localStorage.getItem('code') || false
        },
        data: getData()
    },
    methods: {
        toggleColumn(column) {
            this.columnHidden[column] = !this.columnHidden[column];
            localStorage.setItem(column, true);
        }
    }
});

function getData() {
    return [{
        code: "ZW",
        name: "Zimbabwe"
    }, {
        code: "ZM",
        name: "Zambia"
    }, {
        code: "YE",
        name: "Yemen"
    }];
}

<div id="app" v-cloak>
  <template v-for="column in columns">
    <label for=`toggleTable${column}`>{{`Toggle ${column}`}}</label>
    <input v-on:click="toggleColumn(column)" id=`toggleTable${column}` type="checkbox" :checked="columnHidden[column]" />
    <br />
  </template>

  <v-client-table :columns="columns" v-model="data">
  </v-client-table>
</div>