Vuetify组合框多次添加选项？

Question

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

所以现在如果我选择 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

防止文本添加项目

还有另一个问题（对于关注此处但没有看到聊天室讨论的任何人）。我已将每个问题的答案分开，以使事情更容易理解。

请随意对所有答案投票 :)。

问题

如果用户在组合框中键入内容，则预期列表将被过滤，并且确实如此。

但如果用户在文本后按下回车键，则会添加一个项目，这是不希望的。

我们尝试了一系列事件抑制，包括，

• @keydown.enter.prevent

• @keypress.enter.prevent

• @submit.prevent

• @keydown.enter.prevent="enterItem" 在处理程序中带有event.preventDefault()

• @blur.prevent

加上.stop、.capture的排列。

没有一个事件抑制起作用，所以一个hacky方法是v-ifv-chip

<v-combobox
  ...various attributes as before
>

  <template v-slot:item="{ index, item }">
    ...
  </template>

  <template v-slot:selection="{ index, item }">
    <v-chip v-if="item.text" ...other attributes >{{ item.text }}</v-chip>
  </template>

</v-combobox>

之所以有效，是因为添加的项目没有文本（原因未知），并且变量this.arr 在按所述按回车键时不会被修改。

Codepen

Answer 2

解决长选择列表被下拉菜单遮挡的问题，

下拉菜单在运行时如下所示（通过 chrome 开发者工具）

<div class="v-menu__content theme--light menuable__content__active v-autocomplete__content"
  style="max-height: 304px; min-width: 357px; top: 149px; left: 12px; transform-origin: left top; z-index: 8;">
  <div role="listbox" tabindex="-1" class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
    id="list-261">
    <div tabindex="0" role="menuitem" id="list-item-267" class="v-list-item v-list-item--link theme--light">Foo</div>
    <div tabindex="0" role="menuitem" id="list-item-268" class="v-list-item v-list-item--link theme--light">Bar</div>
    <div tabindex="0" role="menuitem" id="list-item-269" class="v-list-item v-list-item--link theme--light">biz</div>
  </div>
</div>

并且有这些样式

element.style {
  max-height: 304px;
  min-width: 357px;
  top: 149px;
  left: 12px;
  transform-origin: left top;
  z-index: 8;
}

Vuetify 在其选择处理程序中更改了top: 149px，但由于我们关闭了它，我们需要在我们自己的处理程序multipleSelection() 中调用updateMenuDimensions()。

为此，请向组合框添加一个引用，

<v-combobox
  :items="items"
  label="Add Multiple Chips"
  multiple
  small-chips
  solo
  deletable-chips
  :value="arr"
  ref="combobox"
>
  ...
</v-combobox>

然后在 nextTick() 内添加对 updateMenuDimensions 的调用，以允许选择框稳定下来。

methods: {
  multipleSelection(item) {
    this.arr.push({ ...item });
    console.log(this.arr);
    this.$nextTick(() => this.$refs.combobox.updateMenuDimensions())
  },
  deleteChip(item) {
    this.arr = this.arr.filter(x => x !== item);
    console.log(this.arr);
    this.$nextTick(() => this.$refs.combobox.updateMenuDimensions())
  }
}

CodepenVuetify v1.5.14（注意不删除芯片）。

Answer 3

一些小的调整，

• 在项目点击上放置.stop，以防止 Vuetify 在您的处理程序之后处理

• 告诉组合框将 arr 用于:value

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

CodepenVuetify v1.5.14

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