如何在 vuetify 的 v-card 中添加复选框答案

【问题标题】：How can I add checkbox in v-card in vuetiy如何在 vuetify 的 v-card 中添加复选框
【发布时间】：2020-04-06 08:19:26
【问题描述】：

我想在卡片中添加可选择的复选框来选择卡片的价值，有点像下图

但是，当我编写代码时，结果并不令人满意。

<v-container class="py-0">
  <v-row
    align="center"
    justify="start"
  >
    <v-col
      v-for="(address, i) in addresses"
      :key="i"
      cols="12"
    >
      <v-card
        class="mx-auto"
        v-if="addresses!=null"
        elevation="10"
      >
      <v-col cols="2">
        <v-checkbox v-model="disabled" class="mx-2"></v-checkbox>
      </v-col>
      <v-col cols="10">
        <v-card-title class="headline">{{ address.tag }}</v-card-title>
        <v-card-subtitle>{{ address.flatNo }}, {{ address.landmark }}, {{ address.area }}<br>{{address.pincode}}
        </v-card-subtitle>
      </v-col>                    
     </v-card>
    </v-col>
  </v-row>
</v-container>

结果如下：

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

<v-card>
  <v-list-item two-line>
    <v-list-item-action>
      <v-checkbox />
    </v-list-item-action>
    <v-list-item-content>
      <v-list-item-title class="headline mb-1">{{ address.tag }}</v-list-item-title>
      <v-list-item-subtitle>{{ address.flatNo }}, {{ address.landmark }}, {{ address.area }}{{address.pincode}}</v-list-item-subtitle>
    </v-list-item-content>
  </v-list-item>
  <v-card-text>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, amet laudantium! Eveniet beatae corrupti assumenda expedita consequuntur itaque, similique debitis rem laudantium hic voluptates aliquam quam eligendi nulla ipsum quidem.
  </v-card-text>
</v-card>

此答案基于 vuetify 文档https://vuetifyjs.com/en/components/cards/#outlined-cards

结果：https://codepen.io/yozhis/pen/ZEGdZEv

【讨论】：