Ich verwende das vuetify-Framework und stoße auf dieses Problem, bei dem ich nicht sicher bin, wie ich ein Element mehrmals aus der Liste hinzufügen kann. Ich habe eine Dropdown-Liste und möchte die Option foo oder eine beliebige Option bei Auswahl mehrmals hinzufügen. Hier ist ein Link zur Demo Codepen.

Wenn ich jetzt foo oder eine andere Option auswähle und sie dann erneut aus der Dropdown-Liste auswähle, verschwindet sie. Stattdessen möchte ich einen weiteren Chip mit derselben Option hinzufügen.

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>

Wenn jemand eine Ahnung hat, wie dies erreicht werden kann. Es wird sehr geschätzt. Danke dir

7
Somethingwhatever 7 Feb. 2020 im 21:08

3 Antworten

Beste Antwort

Ein paar kleine Anpassungen,

  • Setzen Sie ein .stop auf das Element, um zu verhindern, dass Vuetify nach Ihrem Handler verarbeitet wird

  • Weisen Sie das Kombinationsfeld an, arr für :value zu verwenden.

  • Fügen Sie v-chip und der entsprechenden Methode einen Löschklick-Handler hinzu (Hinweis: Dies funktioniert unter Vuetify 2.1.0, jedoch nicht unter Vuetify 1.5.14, wie er im Codepen verwendet wird. Wenn Sie diese spezielle Version nicht benötigen, installieren Sie die neueste .

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>
4
Richard Matsen 10 Feb. 2020 im 08:27

Verhindern, dass Text ein Element hinzufügt

Es gibt ein weiteres Problem (für alle, die hier folgen, aber die Chatroom-Diskussion nicht sehen). Ich habe die Antworten für jedes Problem getrennt, um die Verfolgung zu vereinfachen.

Fühlen Sie sich frei, über alle Antworten abzustimmen :).

Problem:

Wenn der Benutzer in die Combobox eingibt, wird erwartet, dass die Liste gefiltert wird.

Wenn der Benutzer jedoch nach dem Text die Eingabetaste drückt, wird ein Element hinzugefügt, was nicht erwünscht ist.

Wir haben eine Permutation der Ereignisunterdrückung versucht, einschließlich:

  • @ keydown.enter.prevent

  • @ keypress.enter.prevent

  • @ submit.prevent

  • @ keydown.enter.prevent = "enterItem" mit event.preventDefault() im Handler

  • @ blur.prevent

Plus Permutationen mit .stop, .capture.

Keine der Ereignisunterdrückungen hat funktioniert, daher besteht eine hackige Möglichkeit darin, v-if die v-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>

Dies funktioniert, weil das hinzugefügte Element keinen Text enthält (Grund unbekannt) und die Variable this.arr nicht geändert wird, wenn die Eingabetaste wie beschrieben gedrückt wird.

Codepen

0
Richard Matsen 11 Feb. 2020 im 00:04

Behebung des Problems, dass lange Auswahllisten durch das Dropdown-Menü verdeckt werden,

Das Dropdown-Menü sieht zur Laufzeit so aus (über Chrome-Entwicklertools).

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

Und hat diese Stile

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

Vuetify ändert das top: 149px in seinem Auswahlhandler, aber da wir das deaktiviert haben, müssen wir updateMenuDimensions() in unserem eigenen Handler multipleSelection() aufrufen.

Fügen Sie dazu der Combobox einen Verweis hinzu.

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

Fügen Sie dann den Aufruf von updateMenuDimensions in einem nextTick() hinzu, damit sich das Auswahlfeld einrichten kann.

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())
  }
}

Codepen Vuetify v1.5.14 (Hinweis: Chips werden nicht gelöscht).

3
Richard Matsen 10 Feb. 2020 im 21:47