Vue.js 将复选框验证到芯片组

Question

目前有一个复选框实现来过滤搜索项，但想改用芯片组组件。

复选框：

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

芯片组：

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

这个芯片组实现我做错了什么？

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

终于更新的手表：

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

Answer 1

您可以在数据属性中定义一个变量来存储选择的筹码：

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

请注意，因为您在 v-chip-group 中使用 multiple 道具，所以 selectedFilters 应该是数组。

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

然后你可以定义@change事件来跟踪selectedFilters的值：

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

Vue.js 将复选框验证到芯片组

Vue.js Vuetify checkbox to chipgroup

vue.js

vuetify.js