Блог

Я хочу использовать таблицу v-data для включения и выключения разрешений, чтобы конечные пользователи получали уведомления.

У меня есть две отдельные проблемы, вторая — в моем codepen, пытающемся воссоздать проблему, которая может подчеркнуть мое непонимание проблемы. Я перечислил два ниже. Codepen включен для репликации моего кода UAT.

Мой проект был первоначально развернут еще в начале 2019 года и в настоящее время использует «vuetify»: «^ 1.5.18», что может объяснить, почему я не могу заставить его работать, используя «vuetify»: «^ 2.2.11».

1. У меня есть версия, развернутая в среде разработки / производства. Проблема, которую я собирался решить, заключалась в том, почему мой переключатель внутри таблицы данных не меняется при нажатии на круговую часть переключателя, с любой стороны он обновляется нормально. За пределами таблицы данных переключатель работает так, как ожидалось. Это не самая большая проблема, но мне это не нравится как пользовательский интерфейс, поскольку вы ожидаете, что просто нажмите на переключатель для обновления.
2. Я попытался воссоздать проблему, чтобы продемонстрировать использование codepen, и столкнулся со второй проблемой, из-за которой переключатель здесь не будет отображаться в таблице данных. Мне неудобно, так как я не понимаю конечного поведения. 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>
    

Проблема заключается в синтаксисе вашего тега шаблона.

Вот как вы записываете шаблон слота в v-data-table

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

После того, как вы исправите это, вам не понадобится ни событие щелчка на переключателе, ни флажок, ни метод «подробности». Достаточно использовать v-model.

Вот полный код для компонента в интересах всех

 <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>
 

Удачи.