如何解决带有开关或复选框的 Vuetify 表
我想使用 v-data-table 来打开和关闭最终用户接收通知的权限。
我有两个单独的问题,第二个是在我的代码笔中试图重现该问题,这可能会突出我对该问题的误解。我在下面列出了两个。包含 Codepen 以复制我的 UAT 代码。
我的项目最初是在 2019 年初部署的,目前正在使用 "vuetify": "^1.5.18" 这可以解释为什么我无法使用 "vuetify" 使其工作:“^2.2.11”。
-
我有一个部署到开发/生产环境的版本。我要解决的问题是为什么我的数据表中的 Switch 在单击开关的圆圈部分时不会改变,无论哪一边它都可以正常更新。在数据表之外,开关按预期工作。这不是最大的问题,但不喜欢它作为用户体验,因为您希望只需单击开关即可更新。
-
我尝试重新创建问题以使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。