CODEWITHSUNDEEP
vue.jsvuetify.js
Ari
Ari

Reputation: 583

How do I bind the selected chip in a chip group to a data variable

I'm trying to set up a vuetify chip group and two way bind the selection to a data variable called selected.

enter image description here

This should be a relatively simple operation yet I cant find any documentation on how to do this. Any help would be greatly appreciated. 

new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
   selected:'Vacation',
   tags: [
    'Work',
    'Home Improvement',
    'Vacation',
    'Food',
    'Drawers',
    'Shopping',
    'Art',
    'Tech',
    'Creative Writing',
      ],
    }),
   })

Upvotes: 2

Views: 2914

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7741

A Basic v-model on v-chip-group will bind the chip selection value.

Basic "hello world" example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selection: '06',
    sizes: [
      '04', '06', '08', '10', '12', '14',
    ],
  }),
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <v-chip-group
                  v-model="selection"
                  active-class="deep-purple--text text--accent-5"
                  >
      <v-chip v-for="size in sizes" :key="size" :value="size">
        {{ size }}
      </v-chip>
    </v-chip-group>
    <h2>{{selection}}</h2>
  </v-app>
</div>

Related:

Upvotes: 4

Related Questions