Select All Problem

[mhelaiwa]

Hi, Following the docs I'v faced a problem when I click on select all nothing selected also when I click on a checkbox of one row then all rows are selected. From Vue DevTools I see that clicking on select all make selected full of items and when select one single row makes selected has one single element with empty string

    <datatable :source="tableData" :striped="true" :filterable="true" :line-numbers="true">
        <datatable-column id="sel" label="sel" width="35px" class="checkable-column" :sortable="false" :groupable="false">
            <checkbox id="sel-all" v-model="selectAll"></checkbox>
        </datatable-column>
        <datatable-column id="title" label="title" width="auto"></datatable-column>
        <datatable-column id="name" label="name" width="auto"></datatable-column>
        <template slot="sel" scope="cell">
            <div class="checkable-column">
                <checkbox :id="cell.row.id" :val="cell.row" v-model="selected"></checkbox>
            </div>
        </template>
    </datatable>

<script>
    export default {
        template: require('../templates/myview.html'),
        data() {
            return {
                selectAll:false,
                selected:[],
                tableData: [],
            }
        },
        mounted() {
            axios.get('api/data')
                .then(({data}) => this.tableData = data)
                .catch(({error}) => console.log(error))
        },
        watch: {
            selectAll: function(value) {
                this.selected = value ? [].concat(this.tableData) : [];
            }
        }
    }
</script>

[mhelaiwa]

adding the prop :key="cell.row.id" to the template solved my problem. I wonder why this wasn't mentioned in docs!!. I think this good package should have better docs. Anyways this is the new code of the template:

<template slot="sel" scope="cell">
      <div class="checkable-column">
            <checkbox :id="cell.row.id" :val="cell.row" v-model="selected"></checkbox>
      </div>
</template>

[akbansal]

@enghelewa I am also facing similar issue.. what is the solution. Where I need to add key (:key="cell.row.id")?

[mhelaiwa]

Like this:

<template slot="sel" scope="cell">
      <div class="checkable-column">
            <checkbox :id="cell.row.id" :key="cell.row.id" :val="cell.row" v-model="selected"></checkbox>
      </div>
</template>