Vuetify - 如何在自定义文本时包含复选框以进行 v-select答案

【问题标题】：Vuetify - How to Include checkbox to v-select when customizing textVuetify - 如何在自定义文本时包含复选框以进行 v-select
【发布时间】：2021-05-20 20:06:53
【问题描述】：

如何在自定义文本且不覆盖 multiple 时从 v-select 添加复选框。

<v-select
v-model="selectedRepoImage"
:items="repoImages"
item-text="fulltag"
item-value="repo_image_id"
multiple>
       <template v-slot:selection="{ item, index }">
                    <template v-slot:selection="{ item, index }">
                        <v-chip v-if="index === 0">
                            <span>{{item.fulltag}}</span>
                        </v-chip>
                        <span
                        v-if="index === 1"
                        class="grey--text caption"
                        >(+{{ selectedRepoImage.length - 1}} others)</span>
                   </template>
       </template>
       <template v-slot:item="{ item }">
        //checkboxes ??
        //item.name  ??
       </template>
</v-select>

【问题讨论】：

标签： vue.js vuetify.js v-select v-slot

【解决方案1】：

This Vuetify textfield example has a checkbox

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-card>
          <v-card-text>
            <v-row align="center">
              <v-checkbox
                v-model="includeFiles"
                hide-details
                class="shrink mr-2 mt-0"
              ></v-checkbox>
              <v-text-field label="Include files"></v-text-field>
            </v-row>
            <v-row align="center">
              <v-checkbox
                v-model="enabled"
                hide-details
                class="shrink mr-2 mt-0"
              ></v-checkbox>
              <v-text-field
                :disabled="!enabled"
                label="I only work if you check the box"
              ></v-text-field>
            </v-row>
          </v-card-text>
        </v-card>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
      includeFiles: true,
      enabled: false,
    }),
    })
  </script>
</body>
</html>

【讨论】：

这与问题无关

【解决方案2】：

这很简单，看看我的截图：

如果你自己不让它工作，我可以将它应用到你的代码中。

        <template v-slot:item="{item, attrs, on}">
          <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
            <v-list-item-action>
              <v-checkbox :ripple="false" :input-value="active"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                <v-row no-gutters align="center">
                  {{ item.name }} {{ item.service.name }}
                </v-row>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>

【讨论】：