Die Prüfung des Vuetify v-select-Attributtyps schlägt fehl

Question

Wenn ich v-select in Vuetify 3 verwende, tritt häufig die folgende Fehlermeldung auf:

[Vue-Warnung]: Ungültige Requisite: Typprüfung für Requisite „Titel“ fehlgeschlagen. Erwartete Zeichenfolge |. Zahl |. Boolescher Wert, aber Objekt

In

Ich bin mir nicht sicher, wo das Problem liegt. Ich erhalte als JSON-Antwort ein Array von Objekten von einer Backend-API. Mein Ziel ist es, alle Benutzernamen im Dropdown-Menü anzuzeigen. Wenn ich jedoch ein Element im Dropdown-Menü auswähle, möchte ich das gesamte Objekt in einer Variablen speichern. Wenn ich beispielsweise im Dropdown-Menü den Benutzernamen „Desmond“ auswähle, möchte ich, dass die mit Desmond verbundenen Objekte gespeichert werden, d. h. {"Benutzername": "Desmond", "E-Mail": " desmond@test.com"}

<code><v-select
  v-model="selectedItem"
  :items="items"
  name="Benutzername"
  item-text="Benutzername"
  label="Element auswählen"
  Rückgabeobjekt
></v-select>
</code>

<script>
Axios aus „Axios“ importieren;

Standard exportieren {
  Name: "Testing123",
  Daten() {
    zurückkehren {
      Artikel: [],
      selectedItem: null,
    };
  },
  erstellt() {
    this.fetchItems();
  },
  Methoden: {
    fetchItems() {

      Axios
        .get("http://localhost:5000/items", config)
        .then((response) => {
          this.items = Antwort.Daten
        })
        .catch((error) => {
          console.error(error);
        });
    },

Dies sind meineresponse.data

[
    {
        "Benutzername": "Eric",
        "E-Mail": "eric@test.com",
    },
    {
        "Benutzername": "Desmond",
        "E-Mail": "desmond@test.com",
    },
]

Answer 1

您正在使用 :item-text，这是 Vuetify v2 中的属性名称，详见此处。

在 v3 中，该属性已更名为 :item-title。

更改名称即可正常工作：

<v-select
  item-title="username" 
  ...
></v-select>

在playground中可以看到示例。