Vuejs v-select에서 개체의 속성에 액세스하는 방법

Vuejs v-select에서 개체의 속성에 액세스하는 방법

나의 사용 케이스.

1. 백엔드 api에서 여러 개의 개체를 받았어.
2. 나는 그 물건들을 렌더링 하기를 원한다.v-select

이건 내 암호야

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'">
</v-select>

하지만 그것은 나에게 결과물을 준다.

하지만 객체 이름 속성이 v-select

우리는 바닐라 부에즈로 이것을 할 것이다.

<li v-for="cat in categories" :key="cat.name">{{cat.name}}</li>

하지만 여기서 부시는 우리가 할 수 없다.

:items="categories.name"

Vuetify 설명서

객체 배열 또는 문자열 배열일 수 있음.객체를 사용할 때 텍스트 및 값 필드를 찾으십시오.이것은 아이템 텍스트와 아이템 가치 소품을 사용하여 변경할 수 있다.

그들이 실제로 무엇을 의미하는지item-text그리고item-value다음을 사용하여 이 작업을 수행하는 방법item-text

당신의 카테고리는name속성, 에 전달할 수 있음item-text:

    <v-select
      :items="categories"
      v-model="category"
      name="category"
      v-validate="'required'"
      item-text="name"
      label="Select a category"
      />

나는 코드펜의 예에서 비슷한 해결책을 본 적이 있지만, 어떤 이유에서인지 단지 "이름"을 내 항목 텍스트에 할당하는 것은 효과가 없었다.이름 속성에 작은 따옴표를 추가하여 문자열로 만드는 것이 내게 효과가 있었다(그러나 왜 그런지는 모르겠다).

 <v-select v-if="categories"
            :items="categories"
            :item-text="'name'"
            :item-value="'name'"
            v-model="selectedCategory"
            name="selectedCategory"
            label="Select categories"
            solo
            dark
          >
</v-select>

<script> ...
  categories: [
        { name: "test", path: "test" },
        { name: "test1", path: "test1" }
      ],
</script>

여전히 찾는 이들의 경우 아이템 이름 및 아이템 가치 소품을 사용하여 아이템의 이름과 값에 대해 어떤 값을 반환할지 지정한다.이름만 표시하되 전체 개체를 값으로 유지하려면 v-model에서 반환 개체 프로펠러가 전체 개체를 반환하십시오.

https://vuetifyjs.com/en/components/selects/#custom-text-and-value에서 설명서를 확인하십시오.

<v-select :items="categories" v-model="category" name="category"
v-validate="'required'" item-text="name" return-object label="Select a category"
/>

Vuetify 2.x 사용<v-slot:item>목록을 사용자 지정할 슬롯 및<v-slot:selection>선택 영역을 사용자 정의하십시오.문서에서 v-select 슬롯 목록 확인

<v-select
  :items="categories"
  name="category"
  label="Select a category"
  v-model="category"
  v-validate="'required'"
>

  <template v-slot:item="{item}">
    {{item.name}}
  </template>    
  <template v-slot:selection="{item}">
    {{item.name}}
  </template>
</v-select>

참조URL: https://stackoverflow.com/questions/51296834/vuejs-vuetify-how-to-access-properties-of-object-in-v-select