v-select에서 항목 텍스트 사용자 지정

v-select에서 항목 텍스트 사용자 지정

커스터마이징이 가능한지 알려줘item-text을 위해v-select?

의 각 항목을 사용자 지정v-select, 이와 비슷한 것:

:item-text="item.name - item.description"

Yes you can, usescoped slot문서에 기술된 바와 같이template.

을 위해v-select너는 두 개를 가지고 있다.scoped slot:

• selection: 방법 설명v-select선택 시 항목을 렌더링해야 함
• item: 방법 설명v-select항목을 열 때 렌더링해야 함

이것은 다음과 같다:

<v-select> // Don't forget your props
  <template slot="selection" slot-scope="data">
    <!-- HTML that describe how select should render selected items -->
    {{ data.item.name }} - {{ data.item.description }}
  </template>
  <template slot="item" slot-scope="data">
    <!-- HTML that describe how select should render items when the select is open -->
    {{ data.item.name }} - {{ data.item.description }}
  </template>
</v-select>

복합 예제를 사용한 CodePen

V-Select의 범위 슬롯에 대한 Vuetify 문서

---

Vuetify 1.1.0+ 편집: 해당 슬롯은 새 구성 요소에서도 사용 가능v-autocomplete그리고v-combobox그들이 물려받은 대로v-select.

---

Vue 2.6+에 대해 편집, 바꾸기:

• slot="selection" slot-scope="data"에 의해v-slot:selection="data"
• slot="item" slot-scope="data"에 의해v-slot:item="data"

속기:

:item-text="item => item.name +' - '+ item.description"

슬롯은 포커스에서 자동 선택을 제거한다.

item-texttye는 다음과 같을 수 있다.string | array | function

다음 작업을 수행할 수 있는 역량:

:item-text="text"

그리고

methods: {
  text: item => item.name + ' — ' + item.description
}

다음은 간단한 다음 코드의 예:

<template>
  <v-select
    label="Names"
    v-model="name"
    :items="names"
    item-value="id"
    item-text="name"
    return-object
  >
    <template v-slot:selection="{ item }">
      {{ getText(item) }}
    </template>
    <template v-slot:item="{ item }">
      {{ getText(item) }}
    </template>
  </v-select>
</template>

<script> 
export default {
  data: () => ({
    names: [
      { id: 1, name: 'Paul', age: 23 },
      { id: 2, name: 'Marcelo', age: 15 },
      { id: 3, name: 'Any', age: 30 },
    ],
    name: null,
  }),
  methods: {
    getText(item) => `${item.name} - ${item.text}`,
  },
}   
</script>

다음은 참고문헌: https://vuetifyjs.com/en/components/autocompletes#advanced-slots

항목 텍스트를 조작하는 슬롯 또는 기타 방법을 처리하지 않을 경우.동일한 결과를 얻기 위한 또 다른 접근법이 있다.

단순히 계산된 방법으로 v-model 컬렉션에 새 'displayname' 키: 값 쌍을 추가하고 선택 항목에 대한 v-model로 사용하고 새 키를 항목 텍스트로 사용하십시오.

computed: {
  addDisplayname() {
    return names.map(v => ({ ...v,
      displayname: v.name + ' - ' + v.description
    }))
  }
}

참조URL: https://stackoverflow.com/questions/50531864/customizing-item-text-in-v-select