vue select 繫結複雜資料和預設顯示

Caomeinico發表於2021-10-27
<template>
<div>
<v-btn class="error" @click="btn">測試</v-btn>
<v-select
id="list"
v-model="sortBy"
:items="itemSortBy"
placeholder="Sort By"
solo
hide-details
dense
class="rounded-lg"
color="primary"
item-text="text"
item-value="values"
>
<template #item="{ item }">
<p class="selection-item ma-0">
<v-icon small class="mr-3">
            {{ item.icon }}
</v-icon>
<span>
                {{ item.text }}
</span>
</p>
</template>
</v-select>
</div>
</template>
<script>
export default {
data() {
return {
search: "",
sortBy: '361',
itemSortBy: [
        {
text: "張飛",
values: '360',
        },
        {
text: "趙雲",
values: '361',
        },
      ],
items: [],
loading: false,
options: {
page: 1,
      },
tab: "all",
totalItem: 10,
totalPage: 1,
rowsPerPageItems: [10, 20, 50, 100],
doubleClickPrevent: false,
    };
  },
methods:{
btn(){
console.log(this.sortBy);
    }
  }
};
</script>
<style></style>

更多建站及原始碼交易資訊請見 GoodMai

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70008684/viewspace-2839516/,如需轉載,請註明出處,否則將追究法律責任。

相關文章