CODEWITHSUNDEEP
vue.jsvuetify.jsv-selectv-slot
ropenrom24
ropenrom24

Reputation: 545

Vuetify - How to Include checkbox to v-select when customizing text

How to I add the checkboxes from v-select when customizing text and without overriding the multiple.

<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>

Upvotes: 6

Views: 5589

Answers (2)

swissbuechi
swissbuechi

Reputation: 382

This is pretty simple, just take a look at my snipped:

I can adopt it to your code, if you dont get it to work by yourself.

        <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>

Upvotes: 10

MinorFourChord
MinorFourChord

Reputation: 280

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
      includeFiles: true,
      enabled: false,
    }),
    })
  </script>
</body>
</html>

Upvotes: -2

Related Questions