Vant 中 底部彈窗(picker)選擇數據

{bookId: "01", text: "論語"}, 數據中必須有 text 屬性

<template>
    <div>
        <van-cell is-link @click="getBook">Vant 展示彈出層(fei)</van-cell>
        <van-popup v-model="bookShowPicker" position="bottom">
            <van-picker title="圖書分類"
                        show-toolbar
                        :columns="bookList"
                        @cancel="bookShowPicker = false"
                        @confirm="confirmBook">
            </van-picker>
        </van-popup>
    </div>
</template>

<script>

    /* 這是 vant */
    import Vue from 'vue';
    import Vant, { Dialog } from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);
    /* 這是 vant */
    
    export default {
        name: "mobile-study01",
        data() {
            return {
                bookShowPicker: false,
                bookList: []
            }
        },
        methods: {
            getBook() {
                this.bookShowPicker = true;
                this.bookList = [
                    {bookId: "01", text: "論語"},
                    {bookId: "02", text: "史記"},
                    {bookId: "03", text: "左傳"},
                    {bookId: "04", text: "漢書"},
                    {bookId: "05", text: "戰國策"},
                ];
            },
            confirmBook(val) {
                console.log(val.bookId, val.text, arguments);
                this.bookShowPicker = false;
            }
        },
    }
</script>