Semakan jenis atribut Vuetify v-select gagal

Question

Apabila saya menggunakan v-select dalam Vuetify 3, saya sering menghadapi ralat berikut:

[Amaran Vue]: Prop tidak sah: Semakan taip gagal untuk 'tajuk' prop. Rentetan yang dijangkakan |. Boolean tetapi mendapat Objek

Dalam

Saya tidak pasti apa masalahnya. Saya mendapat pelbagai objek daripada API bahagian belakang sebagai respons JSON saya. Matlamat saya adalah untuk memaparkan semua nama pengguna dalam menu lungsur, tetapi apabila saya memilih item dalam menu lungsur, saya mahu menyimpan keseluruhan objek dalam pembolehubah. Contohnya, jika saya memilih nama pengguna "Desmond" dalam menu lungsur turun, saya mahu objek yang berkaitan dengan Desmond disimpan, iaitu {"nama pengguna": "Desmond","e-mel": " desmond@test.com"}

<kod><v-select
  v-model="selectedItem"
  :item="item"
  name="nama pengguna"
  item-text="nama pengguna"
  label="Pilih Item"
  kembali-objek
></v-select>
</code>

<script>
import axios daripada "axios";

eksport lalai {
  nama: "Ujian123",
  data() {
    kembali {
      item: [],
      Item terpilih: null,
    };
  },
  dicipta() {
    this.fetchItems();
  },
  kaedah: {
    fetchItems() {

      aksios
        .get("http://localhost:5000/items", konfigurasi)
        .then((respons) => {
          this.item = respons.data
        })
        .catch((error) => {
          console.error(error);
        });
    },

Ini ialahresponse.data

[
    {
        "nama pengguna": "Eric",
        "e-mel": "eric@test.com",
    },
    {
        "nama pengguna": "Desmond",
        "e-mel": "desmond@test.com",
    },
]

Answer 1

Anda menggunakan :item-text, iaitu nama hartanah dalam Vuetify v2, terperinci di sini.

Dalam v3, hartanah ini telah dinamakan semula kepada :item-title.

Tukar nama dan ia akan berfungsi:

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

Contoh boleh dilihat di taman permainan.