Vuetify v-select 屬性類型檢查不通過

Question

當我使用Vuetify 3中的v-select時，我經常遇到以下錯誤：

[Vue警告]: 無效的prop：prop「title」的型別檢查失敗。預期為String | Number | Boolean，但得到了Object

在

我不確定問題是什麼。我從後端API取得了一個物件陣列作為我的JSON回應。我的目標是在下拉式選單中顯示所有的用戶名，但當我在下拉式選單中選擇一個項目時，我想將整個物件儲存在一個變數中。例如，如果我在下拉式選單中選擇了「Desmond」使用者名，我希望將與Desmond相關的物件儲存起來，即{"username": "Desmond","email": " desmond@test.com"}

<code><v-select
  v-model="selectedItem"
  :items="items"
  name="username"
  item-text="username"
  label="Select Item"
  return-object
></v-select>
</code>

<script>
import axios from "axios";

export default {
  name: "Testing123",
  data() {
    return {
      items: [],
      selectedItem: null,
    };
  },
  created() {
    this.fetchItems();
  },
  methods: {
    fetchItems() {

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

這是我的response.data

[
    {
        "username": "Eric",
        "email": "eric@test.com",
    },
    {
        "username": "Desmond",
        "email": "desmond@test.com",
    },
]

Answer 1

您正在使用 :item-text，這是 Vuetify v2 中的屬性名稱，詳見此處。

在 v3 中，該屬性已更名為 :item-title#。

更改名稱即可正常運作：

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

在playground中可以看到範例。