关于前端:vue-select-绑定复杂数据和默认显示

<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