1

I want to use a v-data-table to toggle permissions on and off for end-users to receive a notification.

I have two separate issues, the second is in my codepen trying to recreate the issue which might highlight my misunderstanding of the issue. I've listed the two below. Codepen included to replicate my UAT code.

My project was deployed originally back at the beginning of 2019 and is currently using "vuetify": "^1.5.18" which may explain why I can't get it working using "vuetify": "^2.2.11".

  1. I have a version deployed to a dev/production environment. The issue I was coming on to solve was why my Switch inside a data table does not change when clicking on the circle part of the switch, either side it updates fine. Outside of the data table, the Switch works as expected. It's not the biggest issue but don't like it as a user experience as you would expect to just click on the switch to update. enter image description here

  2. I tried to recreate the issue to demonstrate using codepen and encountered a second issue where the switch here won't display within the data table. This makes me uncomfortable as I don't understand the end behaviour. Codepen 

      <v-data-table
      :headers="headers"
      :items="listItems"
      class="elevation-2"
    >
    <template slot="items" slot-scope="props">
      <tr>
        <td>{{props.item.label}}</td>
        <td>
          <v-switch
            v-model="props.item.switch"
            @click="details(props.item.label, !props.item.switch)"
          ></v-switch>
        </td>
        <td>
          <v-checkbox
              v-model="props.item.switch"
              label="Test"
              @click="details(props.item.label, !props.item.switch)"
          >
          </v-checkbox>
        </td>

      </tr>
    </template>
  </v-data-table>

</v-container>
Woody_1983
  • 151
  • 2
  • 14

1 Answers1

1

The issue is your template tag syntax.

This is how you write the slot template in v-data-table

<template slot="item.switch" slot-scope="{ item }">
    <v-switch v-model="item.switch"></v-switch>
</template>

After you fix this, you don't need neither the click event on the switch or the checkbox, nor the method "details". Using v-model is enough.

Here is the complete code for the component for the benefit of all

<template>
    <v-container class="px-0" fluid>
        <v-data-table :headers="headers" :items="listItems" class="elevation-2">
            <template slot="item.switch" slot-scope="{ item }">
                <v-switch v-model="item.switch"></v-switch>
            </template>
            <template slot="item.checkbox" slot-scope="{ item }">
                <v-checkbox v-model="item.switch" :label="item.switch"></v-checkbox>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
    export default {
        props: ["car"],
        data() {
            return {
                switch1: true,
                listItems: [
                    { label: 0, switch: false },
                    { label: 1, switch: true },
                    { label: 2, switch: true }
                ],
                headers: [
                    { text: 'Label', sortable: false, value: 'label' },
                    { text: 'Switch', sortable: false, value: 'switch' },
                    { text: 'Checkbox', sortable: false, value: 'checkbox' },
                ]
            }
        },

        methods: {
        },
    };
</script>

Good luck.

MAW
  • 615
  • 6
  • 17