带有开关或复选框的 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 (将#修改为@）

v-data-table vue-component vue.js vuetify.js