web-dev-qa-db-ja.com

v-selectでアイテムテキストをカスタマイズする

item-textをv-selectにカスタマイズできるかどうか教えてください

v-selectの各アイテムをカスタマイズするには、次のようにします。

:item-text="item.name - item.description"
vuetify.js
22
Clark

はい、できます。ドキュメントで説明されているようにscoped slotを使用し、templateを指定します。

v-selectには、2つの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 1.1.0 +の編集：これらのスロットは、v-autocompleteを継承する新しいコンポーネントv-comboboxおよびv-selectでも使用できます。

Vue 2.6 +の編集、置換：

  • slot="selection" slot-scope="data" by v-slot:selection="data"
  • slot="item" slot-scope="data" by v-slot:item="data"
46
Toodoo

スロットはフォーカス時に自動選択を削除します。

item-text tyeは次のとおりです：string | array | function

その後、私たちは作ることができます：

:item-text="text"

そして

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

以下に簡単なコードの例を示します。

<template>
<v-select
  label='Names'
  v-model='name'
  :items='names'
  item-value='id'
  item-text='name'
  return-object
>
  <template slot='selection' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </template>
  <template slot='item' slot-scope='{ item }'>
    {{ item.name }} - {{ item.age }}
  </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},
    ]
  })
}   
</script>

以下がリファレンスです： https://vuetifyjs.com/en/components/autocompletes#advanced-slots

5
Marcelo Vinicius