Vuetify v-select 속성 유형 확인이 실패합니다.

Question

<p>Vuetify 3에서 v-select를 사용할 때 다음 오류가 자주 발생합니다. </p> <인용문> <p>[Vue 경고]: 잘못된 속성: 'title' 속성에 대한 유형 확인에 실패했습니다. 문자열 | 숫자가 필요했지만 개체를 ​​얻었습니다.

<VListItem key=0 title=`</p> </인용문> <p>문제가 무엇인지 잘 모르겠습니다. 백엔드 API에서 JSON 응답으로 개체 배열을 받고 있습니다. 내 목표는 드롭다운에 모든 사용자 이름을 표시하는 것이지만, 드롭다운에서 항목을 선택하면 전체 개체를 변수에 저장하고 싶습니다. 예를 들어, 드롭다운 메뉴에서 "Desmond" 사용자 이름을 선택하면 Desmond와 관련된 개체가 저장되기를 원합니다. 예: <code>{"username": "Desmond","email": " desmond@test.com"}</code></p> <pre class="lang-js Prettyprint-override"><code><v-select v-model="selectedItem" :items="아이템" name="사용자 이름" item-text="사용자 이름" label="항목 선택" 반환 개체 ></v-select> <pre class="brush:php;toolbar:false;"><script> "axios"에서 axios를 가져옵니다. 기본값 내보내기 { 이름: "Testing123", 데이터() { 반품 { 항목: [], 선택된 항목: null, }; }, 만들어진() { this.fetchItems(); }, 방법: { fetchItems() { 액시오스 .get("http://localhost:5000/items", config) .then((응답) => { this.items = response.data }) .catch((오류) => { console.error(오류); }); },</pre> <p>이것은 내<code>response.data</code></p>입니다. <pre class="brush:php;toolbar:false;">[ { "사용자 이름": "에릭", "이메일": "eric@test.com", }, { "사용자 이름": "데스몬드", "이메일": "desmond@test.com", }, ]</pre></p>

Answer 1

Vuetify v2의 속성 이름인 :item-text를 사용하고 있습니다. 자세한 내용은 여기를 참조하세요.

v3에서는 이 속성의 이름이 :item-title로 변경되었습니다.

이름을 바꾸면 작동합니다:

으아악

예제는 놀이터에서 볼 수 있습니다.