无法获取 v-simple-checkbox 或 v-checkbox 来呈现框本身答案

【问题标题】：Cannot get v-simple-checkbox or v-checkbox to render the box itself无法获取 v-simple-checkbox 或 v-checkbox 来呈现框本身
【发布时间】：2021-05-13 14:28:06
【问题描述】：

我正在关注creating a data table with a checkbox in one column 的文档示例。

虽然其他一切都呈现正常，但复选框本身不会显示。单击它的动画会显示，但不会显示框本身。 New Item modal/dialog 中的v-checkbox 也是这种情况。

下面是我所说的一个例子：

我尝试在我的index.html 中手动指定 Vuetify CDN，但这没有任何效果。使用开发者工具，我确保了 Vuetify 的 CSS 正在加载并应用于页面。

这是我的简化表格组件：

<v-data-table
    :headers="headers"
    :items="workorders"
    :items-per-page="5">
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-toolbar-title>Work Orders</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-dialog
          v-model="dialog"
          max-width="500px"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              dark
              class="mb-2"
              v-bind="attrs"
              v-on="on"
            >
              New Item
            </v-btn>
          </template>
          <v-card>

            <v-card-text>
              <v-container>
                <v-row>
                    <v-checkbox
                      v-model="editedItem.sameAsCustomerAddress"
                      label="Same as Customer Address?"
                      @click="editedItem.sameAsCustomerAddress = !editedItem.sameAsCustomerAddress"
                    ></v-checkbox>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:[`item.actions`]="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
     <template v-slot:[`item.status`]="{ item }">
       <v-chip
       :color="getStatus(item.status).color"
       dark>
       {{ getStatus(item.status).status }}
       </v-chip>
     </template>
     <template v-slot:[`item.hasPaid`]="{ item }">
       <v-simple-checkbox
       v-model="item.hasPaid">
       </v-simple-checkbox>
     </template>
    </v-data-table>

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

似乎v-data-table 期望value 字段为小写，即使实际字段是混合大小写的：

{ text: 'Paid?', value: 'hasPaid' },  // ❌ `hasPaid` must be lowercase
{ text: 'Paid?', value: 'haspaid' },  // ✅

demo

【讨论】：