vue select 绑定复杂数据和默认显示

1
2<div>
3<v-btn class="error" @click="btn">测试</v-btn>
4<v-select
5id="list"
6v-model="sortBy"
7:items="itemSortBy"
8placeholder="Sort By"
9solo
10hide-details
11dense
12class="rounded-lg"
13color="primary"
14item-text="text"
15item-value="values"
16>
17<template #item="{ item }">
18<p class="selection-item ma-0">
19<v-icon small class="mr-3">
20            {{ item.icon }}
21</v-icon>
22<span>
23                {{ item.text }}
24</span>
25</p>
26</template>
27</v-select>
28</div>
29
30</template>
31
32<script>
33
34export default {
35data() {
36return {
37search: "",
38sortBy: '361',
39itemSortBy: [
40        {
41text: "张飞",
42values: '360',
43        },
44        {
45text: "赵云",
46values: '361',
47        },
48      ],
49items: [],
50loading: false,
51options: {
52page: 1,
53      },
54tab: "all",
55totalItem: 10,
56totalPage: 1,
57rowsPerPageItems: [10, 20, 50, 100],
58doubleClickPrevent: false,
59    };
60  },
61methods:{
62btn(){
63console.log(this.sortBy);
64    }
65  }
66
67};
68</script>
69
70<style></style>

更多建站及源码交易信息请见 好买网 GoodMai