[英]How to use icons in vuetify v-select?
我有以下使用數組和 items 道具填充的 v-select,如圖所示:
<v-select v-model="myModel"
:items="users"
chips
:readonly="!item.Active"
label="Required users to finalize"
item-text="NAME"
item-value="ID"
multiple
filled
return-object
>
</v-select>
我的數組有以下內容:
[{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false} ]
如果他們處於活動狀態,我希望我的 v-select 芯片在所選用戶旁邊有一個復選標記。 我的 v-chip 基本上應該是這樣的:
<v-chip
class="ma-2"
color="teal"
text-color="white"
>
<v-avatar left>
<v-icon>mdi-checkbox-marked-circle</v-icon>
</v-avatar>
</v-chip>
如何在此 v-select 中使用帶有圖標的v-chip
?
試試這個:
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ users: [{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false}], }), })
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <v-container fluid> <v-select :items="users" label="Required users to finalize" item-text="NAME" item-value="ID" multiple filled chips return-object > <template #selection="{ item }"> <v-chip v-if="item.IS_ACTIVE" class="ma-2" color="teal" text-color="white" > <v-avatar left> <v-icon>mdi-checkbox-marked-circle</v-icon> </v-avatar> {{ item.NAME }} </v-chip> </template> </v-select> </v-container> </v-app> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.