layui 分頁vue渲染表格：

步驟：

1、初始化獲取表格列表資料，預設顯示第一頁資料列表；

2、列表渲染完接著初始化layui分頁

3、分頁點選跳轉時再獲取指定頁碼的資料列表

問題點：

點選分頁後【jump】跳轉分頁將頁面傳遞給獲取list的方法，資料可以實時渲染最新的，但是方法不能再呼叫同一個，否則頁碼不能更新

程式碼如下：

<script>
    new Vue({
        el: '#app',
        data: {
            page: 1,
            total: 0,
            pageSize: 5,
            state: 4,
 

            loadImg: "",
            timer: null,
            free_status: 1,
            list: [],
            userInfo: {},
            radioData: [
                { value: '使用會員幣',balance: "" },
                { value: '使用工單條數',balance: ""}
            ],
            tmpListTotal: 0,
            radioVal: 1,
 

            dialog: false,
            cIndex: -1,
            isFirstPage:true
        },
        filters: {
            /*空字串轉換*/
            capitalize: function (value) {
                if (!value) return '暫無使用者名稱';
                value = value.toString();
                return value.charAt(0).toUpperCase() + value.slice(1);
 

            }
        },
        created() {
            this.getUserInfo();
            this.getList(this.page);
        },
        mounted() {
            this.$nextTick(() => {
                window.addEventListener('scroll', this.handleScroll, true);
            })
        },
        methods: {
            getList(_page) {
                let _url = "/apis/form_message/get_message";
                let _this = this;
                $.ajax({
                    url: _url,
                    data: {
                        page: _page
                    },
                    method: "POST",
                    success: function (res) {
                        if (res.code == 1) {
                            _this.total = res.data.list_count;
                            _this.pageSize = res.data.pagesize;
                            if(res.data.list_count === 0){
                                _this.state = 6;
                            }
                            if(res.data.list_count <= _this.pageSize){
                                _this.state = 5;
                            }
                            if (_this.page == 1) {
                                _this.list = res.data.list;
                            } else {
                                _this.list = _this.list.concat(res.data.list);
                            }
                            if(_this.isFirstPage){
                                _this.pageInit(_this.total);  // 只有第一頁，初始化的時候需要呼叫，頁面跳轉的時候不需要，只需要渲染列表即可
                            }
                        }
                    }
                });
            },
            pageInit(listTotal) {
                let _this = this;
                if(listTotal === 0){
                    $("#join_page").hide();

                }else{
                    $("#join_page").show();
                }
                layui.use(['laypage','layer'], function() {
                    let laypage = layui.laypage,layer = layui.layer;
                    if(listTotal) {
                        _this.tmpListTotal = listTotal;
                    } else {
                        listTotal = _this.tmpListTotal;
                    }
                    //頁碼初始化
                    laypage.render({
                        elem: 'list_page'
                        ,theme: '#007AFF'
                        , count: listTotal //資料總數
                        ,limit: _this.pageSize // 每頁條數
                        ,prev:"<"
                        ,next:">"
                        ,jump: function(obj,first){
                            if(!first){
                                _this.isFirstPage = false;
                                _this.getList(obj.curr);
                            }else{
                                _this.isFirstPage = true
                            }

                        }
                    });
                });
            },

            /*獲取使用者資訊*/
            getUserInfo() {
                let _url = "/form/message.php";
                $.ajax({
                    url: _url,
                    method: "POST",
                    async: false, // 同步
                    success: function (res) {
                        let _res = JSON.parse(res);
                        if (_res.code === 1) {
                            userInfo = Object.assign({}, _res.data);
                            console.log('userInfo', userInfo);
                        }
                    },
                    error: function (res) {
                        console.log('error_res', res);
                    }
                });
            },
            /*選擇購買方式*/
            getRadioVal() {
                console.log('radioVal',this.radioVal);
            },
            goBuy(index) {
                let _this = this;
                _this.cIndex = index;
                _this.dialog = !_this.dialog;
                _this.radioData[0].balance = userInfo.balance;// 剩餘會員幣餘額
                _this.radioData[1].balance = userInfo.number; // 剩餘工單數量

            },
            cancel(index){
                let _this = this;
                _this.cIndex = index;
                _this.dialog = !_this.dialog;
            },
            confirm(index){
                let _this = this;
                _this.cIndex = index;
                this.dialog = !this.dialog;
                let paramData = {
                    type: _this.radioVal,
                    userid: userInfo.userid,
                    price:_this.list[index].price,
                    rid:_this.list[index].rid,
                    free:_this.list[index].is_resource
                }
                console.log("confirm",paramData);
                let _url = "/apis/form_message/buy_message";
                $.ajax({
                    url: _url,
                    method: "POST",
                    data: paramData,
                    success: function (res) {
                        layer.msg(res.msg);
                        if(res.code === 1){
                            window.location.href= "../member/message.html";
                            console.log('購買成功', res);
                        }
                    },
                    error: function (res) {
                        console.log('error_res', res);
                    }
                });
            }
        }
    })
</script>

html:

<div id="app">
    <table cellspacing="0" class="tb ls">
        <tbody>
        <tr>
            <th data-hide="1200">使用者名稱</th>
            <th data-hide="1200">價格</th>
            <th>IP</th>
            <th>新增時間</th>
            <th>可領取次數</th>
            <th>已領取次數</th>
            <th>資訊</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,p_index) in list" :key="p_index">
            <td>{{item.username | capitalize}}</td>
            <td>{{item.price}}</td>
            <td>{{item.ip}}</td>
            <td>{{item.create_time}}</td>
            <td>{{item.number_count}}</td>
            <td>{{item.c_number}}</td>
            <td>
                <ul v-for="(_item,_index) in list[p_index].answer" :key="_index">
                    <li>{{_item.content}}</li>
                </ul>
                <div class="mask"  v-show="cIndex == p_index && dialog"></div>
                <div class="buyBox" v-show="cIndex == p_index && dialog">
                    <p class="title">購買商品</p>
                    <p>是否確定購買此商品，提交後不可取消。</p>
                    <div class="radio"  v-for="(item, index) in radioData" :key="index">
                        <input
                                type="radio"
                                v-model="radioVal"
                                :value="index+1"
                                @change="getRadioVal"
                                :id="index+1"
                        />
                        <label :for="index+1">{{ item.value }}<span>剩餘：{{item.balance}}</span></label>
                    </div>
                    <div class="operate">
                        <button class="confirm" @click.stop="confirm(p_index)">確定</button>
                        <button  @click.stop="cancel(p_index)">取消</button>
                    </div>
                </div>
            </td>
            <td><button @click.stop="goBuy(p_index)">購買</button></td>
        </tr>
        </tbody></table>
        <div id="list_page" class="list_page" style="text-align: center;"></div>
</div>