Currently have a checkbox implementation to filter down search items but want make use of the chip group component instead.

Checkbox:

  <v-checkbox
    v-model="assetFilters"
    label="image"
    value="image"
  />
  <v-checkbox
    v-model="assetFilters"
    label="video"
    value="video"
  />
  <v-checkbox
    v-model="assetFilters"
    label="pdf"
    value="pdf"
  />
  <v-checkbox
    v-model="assetFilters"
    label="link"
    value="link"
  />
  <v-checkbox
    v-model="assetFilters"
    label="text"
    value="text"
  />
  <v-checkbox
    v-model="assetFilters"
    label="powerpoint"
    value="powerpoint"
  />

Chip group:

    <v-chip-group
      v-model="assetFilters"
      multiple
    >
      <v-chip
        v-for="item in assetFilters"
        :key="item"
        outlined
        filter
      >
        {{ item }}
      </v-chip>
    </v-chip-group>

What have I done wrong for this chip group implimantation?

  data () {
    return {
      assetFilters: ['powerpoint', 'pdf', 'image', 'video', 'link', 'text'],

Finally the watch which updates:

  watch: {
    assetFilters () {
      console.log('asset filter change')
      this.search()
    }
  },

CodePudding user response：

You can define a variable in data property to store selected chips:

data () {
    return {
      assetFilters: ['powerpoint', 'pdf', 'image', 'video', 'link', 'text'],
      selectedFilters: []
    }
}

Note that because you are using multiple props in v-chip-group, selectedFilters should be array.

<v-chip-group
      v-model="selectedFilters"
      multiple
      @change="handleChange"
>
      <v-chip
        v-for="item in assetFilters"
        :key="item"
        outlined
        filter
        :value="item"
      >
        {{ item }}
      </v-chip>
</v-chip-group>

Then you can define @change event to track the value of selectedFilters:

methods: {
    handleChange() {
      console.log('asset filter change', this.selectedFilters)
      this.search()
    }
},