vuetify show-select in data-table not selecting items

Question

So, I upgraded from vuetify 1.5 to latest (2.1xx) and get stuck on a few places. I have a data-table where I want a "select all" checkbox in the header. I added it with the "show-select" property and what I can see is that as the checkbox, when checked, actually puts all the items in the "selected" v-model.

My problem is that I want to have a template for item-props to customize the appearance of the rows and the checkbox that I bind to "props.selected" does not seem to work. If I check any checkbox on any row the item is not added to my "selected" v-model.

It is only if I use no template at all that I get it to work with the auto-generated checkboxes but this does not suffice for my current demands. In vuetify 1.5 I got it to work but I don't understand how to make it work in the new version.

<template>
<div>
    <v-data-table 
        hide-default-footer 
        v-model="selected" 
        :sort-desc.sync="sortDescending"
        :sort-by.sync="sortBy"
        :headers="headers" 
        :items="cases" 
        item-key="id" 
        show-select 
        :items-per-page="itemsPerPage"
        class="elevation-0">

        <template v-slot:item="props">
            <tr>
              <td>
                   <v-checkbox v-model="props.selected" color="nordnetBlue" hide-details ></v-checkbox>
                </td>       
                <td class="navigation-link" @click="goToCase(props.item)">{{ concatText( props.item.subject, 20) }}</td>
                <td>{{ props.item.createdOn }}</td>
                <td>{{ props.item.source }}</td>
                <td>{{ !props.item.isSameQueue ? props.item.queueName : '' }}</td>
            </tr>
        </template>
    </v-data-table>
    <pre class="green--text">{{selected}}</pre>
</div>
</template>

Toby Fieldgroove Toby Fieldgroove · Accepted Answer · 2019-12-01T11:30:57

I could not solve this so I followed a vuetify documentation example of how to customize the slot for each particular column.

So in my case, as you can see. three of the columns I just display the text as is and for two of them I do some modifying. So, I used a template for the two ones I wanted to edit.

Example:

template v-slot:item.Name="{ item }">
   {{ item.Name }}                                
   <v-tooltip bottom>
    <template v-slot:activator="{on}">
      <v-icon @click="openCustomer(item.Id)" class="clickable" small color="nordnetBlue" v-on="on">launch</v-icon>
    </template>
    Open in new window
    </v-tooltip>                                  
</template>

vuetify show-select in data-table not selecting items

1 Answers