CODEWITHSUNDEEP
vue.jsvuetify.js
Sluman_Slumun_Slamet
Sluman_Slumun_Slamet

Reputation: 59

How to display Checkbox in DataTable body Vuetify

I have a Vue application which is built using Vuetify and I want to create a table where cell content is a checkbox v-checkbox but it renders html string instead of checkbox inside table body.

I use v-data-table as a main table.

For illustration: enter image description here

My Code:

<v-data-table :headers="headers"
              :items="menuaccess"
              :search="search"
              sort-by="alias"
              class="elevation-3"
              v-html="value"> <--- I tried add this but not working

<!-- other code -->

Data source snippet (I will get data from API later) :

headers: [
    { text: '', align: 'start', value: 'alias' },
    { text: 'ASSET_EDIT', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'ASSET_VERIFICATION', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'ASSET_VIEW', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'CUSTOMER_COMPANY_EDIT', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
],

Upvotes: 0

Views: 1734

Answers (1)

Magiczne
Magiczne

Reputation: 1606

You need to place code inside slot template.

<v-data-table :headers="headers"
              :items="menuaccess"
              :search="search"
              sort-by="alias"
              class="elevation-3">
      <template v-slot:item.property_name="{ item }">
        <v-simple-checkbox v-model="item.property_name" />
      </template>
</v-data-table>

Where property_name is name of the property on your data object.

Read more about it in the documentation.

Upvotes: 1

Related Questions