我正在使用 v-autocomplete 組件來列出選擇器中的專案。由于 v-autocomplete 只是一個高級 v-select，我認為 v-select 的答案也適用于 v-autocomplete。
在我的串列中，我有不同狀態的專案，應該以某種方式進行標記。所以我想根據專案屬性向選項添加資料屬性。如果我可以添加至少一個不同的類，那也會有幫助。但是由于我沒有任何選項元素可以將這些屬性添加到其中，因此我找不到方法來做到這一點。
我的專案看起來像：
{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}
這個想法是根據它們的狀態以不同的方式在選擇中設定選項的樣式。所以我想實作如下目標：
<v-autocomplete
v-model="selectedItem"
:items="items"
:item-status="item.status">
</v-autocomplete>
這可能嗎？
uj5u.com熱心網友回復：
聽起來您需要的是利用可用于 v-autocomplete 元素的item 插槽。
<template v-slot:item="{ item }">
<div :>
{{ item.text }}
</div>
</template>
除了使用getItemClass(item)方法，您還可以將status: className配對保留在組件資料/計算內的物件中。語法將更改為itemClass[item].
該插槽允許您自定義下拉串列中的串列項。您甚至可以使用它添加不同顏色的不同圖示來表示專案狀態。
如果您想要在選擇專案時自定義外觀，您可以為selection 插槽創建類似的模板。
uj5u.com熱心網友回復：
您可以selected根據來設定選項的樣式status，這里是對此的基本想法，但可以肯定的是，您可以使其更具動態性。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
auto: [{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}],
selectedAuto: '',
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selectedAuto"
:items="auto"
:item-status="auto.status"
>
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
<v-list-item-action-text>
<span v-if="data.item.status == 'finished'" class="green--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'running'" class="red--text">
{{ data.item.text }}
</span>
<span v-if="data.item.status == 'scheduled'" class="blue--text">
{{ data.item.text }}
</span>
</v-list-item-action-text>
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
<v-list-item-action-text>
{{ data.item.text }}
</v-list-item-action-text>
</template>
</v-autocomplete>
</v-app>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353949.html
標籤：Vue.js vuetify.js v-选择 v-自动完成
上一篇：添加新元素后如何清除輸入欄位？