Vuetify 组合框多次添加选项？

Question

我正在使用 vuetify 框架，但遇到了这个问题，我不确定如何从列表中多次添加一个项目。我有一个下拉列表，我想foo在选择时多次添加该选项或任何选项。这是演示代码笔的链接。

所以现在如果我选择 foo 或任何其他选项，然后从下拉列表中再次选择它，它就会消失，而是我想要另一个具有相同选项的芯片添加到其中？

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          text: 'Foo',
          value: 'foo'
        },
        {
          text: 'Bar',
          value: 'bar'
        },
        {
          text: 'biz',
          value: 'buzz'
        },
        {
          text: 'buzz',
          value: 'buzz'
        }
      ],
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-combobox :items="items" label="Add Multiple Chips" multiple small-chips solo deletable-chips>
        <template v-slot:item="{ index, item }">
      <v-list-tile-content>
        {{item.text}}
      </v-list-tile-content>
    </template>
        <template v-slot:selection="{ index, item }">
      <v-chip close dark color="info">
        {{ item.text }}
      </v-chip> 
    </template>
      </v-combobox>
    </v-container>
  </v-app>
</div>

如果有人对如何实现这一目标有任何线索。将不胜感激。谢谢

Answer 1

一些小的调整，

• 单击.stop该项目以防止 Vuetify 在处理程序之后进行处理

• 告诉组合框使用 arr:value

• 添加删除点击处理程序v-chip和相应的方法（注意，这适用于 Vuetify 2.1.0，但不适用于 Codepen 上使用的 Vuetify 1.5.14。如果您不需要该特定版本，请安装最新版本。

Codepen Vuetify v1.5.14

CodeSandbox Vuetify v2.1.0

<template>
  <div id="app">
    <v-app id="inspire">
      <v-container>
        <v-combobox
          :items="items"
          label="Add Multiple Chips"
          multiple
          small-chips
          solo
          deletable-chips
          :value="arr"
        >
          <template v-slot:item="{ index, item }">
            <v-list-tile-content @click.stop="multipleSelection(item)">{{item.text}}</v-list-tile-content>
          </template>
          <template v-slot:selection="{ index, item }">
            <v-chip close dark color="info" 
               @click:close="deleteChip(item)" >{{ item.text }}</v-chip>
          </template>
        </v-combobox>
      </v-container>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "playground",
  data: () => ({
    arr: [],
    items: [
      {
        text: "Foo",
        value: "foo"
      },
      {
        text: "Bar",
        value: "bar"
      },
      {
        text: "biz",
        value: "buzz"
      },
      {
        text: "buzz",
        value: "buzz"
      }
    ]
  }),
  methods: {
    multipleSelection(item) {
      this.arr.push({...item});
      console.log(this.arr);
    },
    deleteChip(item) {
      this.arr = this.arr.filter(x => x !== item);
      console.log(this.arr);
    }
  }
};
</script>