asp.mvc中的vue分页实例，分页组件无法重置reload，解决点击查询按钮后，分页不刷新的问题

刚刚接触Vue.js，现在需要做一个查询功能，并且进行服务端分页。主要思路是在页面中注册一个分页组件，然后进行调用。代码如下

1.引用vue.js，具体去网上下载

2.在html的body中添加如下代码，其中的<page></page>就是分页组件

<div id="searchDiv">
            <div style="width: 100%">
                <label style="width: 5%">Title:</label>
                <input type="text" style="width: 20%" id="inputTitle" name="inputTitle" value="">
                <label style="width: 5%" for="field-1">BeginDate:</label>
                <input type="text" class="datepicker" id="inputBeginDate" name="inputBeginDate" data-format="yyyy-mm-dd">
                <label style="width: 5%" for="field-1">EndDate:</label>
                <input type="text" class="datepicker" id="inputEndDate" name="inputEndDate" data-format="yyyy-mm-dd">
                <input type="submit" class="btn btn-primary" v-on:click="getdata()" value="查询">
                <a href="/News/DownFile">
                    <button class="btn btn-info">下载 </button>
                </a>
            </div>
            <table id="example-1" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Date</th>
                        <th>Keywords</th>
                    </tr>
                </thead>
                <tbody class="middle-align">
                    <tr v-for="uitem in ulist">
                        <td>{{uitem.Title}}</td>
                        <td>{{uitem.Date}}</td>
                        <td>{{uitem.Keywords}}</td>
                    </tr>
                    <tr id="trloading">
                        <td colspan="3" style="background-color:white;text-align:center">
                            <img src="~/Image/loading.gif" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <page></page>
        </div>

 

3.添加page标签对应的template

<script type="text/x-template" id="page">
        <ul class="pagination">
            <li v-show="current != 1" @@click="current-- && goto(current)" ><a href="javascript:void(0)">上一页</a></li>
            <li v-for="index in pages" @@click="goto(index)" :class="{'active':current == index}" :key="index">
              <a href="javascript:void(0)" >{{index}}</a>
            </li>
            <li v-show="allpage != current && allpage != 0 " @@click="current++ && goto(current++)"><a href="javascript:void(0)" >下一页</a></li>
        </ul>
    </script>
<script>

因为我的环境是asp.mvc所以，以上代码中的@需要写@@，否则会被认为是mvc的语法。如果不是asp.mvc可以将@@变成@

4.添加vue的脚本代码

<script>
    var vm = new Vue({
        el: "#searchDiv",
        data: {
            ulist: [],
            self: [],
            pagedata: []
        },
        methods: {
            getdata: function () {  //查询数据  
                //先把本地对象缓存下来 
                self = this;
                // loading
                $("#trloading").show();
                // 调用后台方法查询数据 
                $.post("/News/DoSearch",
                    {
                        keycontent: '15', // 一页几行
                        page: '1', // 当前页数
                        title: $("#inputTitle").val(),
                        begindate: $("#inputBeginDate").val(),
                        enddate: $("#inputEndDate").val()
                    }, function (_result) {
                        // 查询成功后
                        self.ulist = _result.data;
                        // 设置分页属性
                        pagedata = {
                            current: 1,
                            showItem: 6,
                            allpage: _result.count
                        };
                        // 注册分页控件
                        Vue.component("page", {
                            template: "#page",
                            data: function () {
                                return pagedata
                            },
                            computed: {
                                // 计算分页页码
                                pages: function () {
                                    var pag = [];
                                    if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
                                        //总页数和要显示的条数那个大就显示多少条
                                        var i = Math.min(this.showItem, this.allpage);
                                        while (i) {
                                            pag.unshift(i--);
                                        }
                                    } else { //当前页数大于显示页数了
                                        var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始
                                            i = this.showItem;
                                        if (middle > (this.allpage - this.showItem)) {
                                            middle = (this.allpage - this.showItem) + 1
                                        }
                                        while (i--) {
                                            pag.push(middle++);
                                        }
                                    }
                                    return pag
                                }
                            },
                            methods: {
                                // 每次点击页码进行翻页时候，调用的方法
                                goto: function (index) {
                                    if (index == this.current) return;
                                    this.current = index;
                                    //这里可以发送ajax请求
                                    $("#trloading").show();
                                    self.ulist = [];
                                    // 点击页码时候，进行查询
                                    $.post("/News/DoSearch", { keycontent: '15', page: this.current, title: $("#inputTitle").val(), begindate: $("#inputBeginDate").val(), enddate: $("#inputEndDate").val() }, function (_result) {
                                        self.ulist = _result.data;
                                        $("#trloading").hide();
                                    });
                                }
                            }
                        });
                        $("#trloading").hide();
                    });
            }
        },
        created: function () {
            //初始化事件里边去调用查询方法  
            this.getdata();
        }
    });
</script>

之前找到一个网站，https://www.cnblogs.com/cqsjs/p/5772834.html?utm_source=itdadao&utm_medium=referral。我所用的分页组件，就从这个网站上下载的。特此感谢

关于分页组件不重置，不能reload，点击查询后，后分页不刷新的问题

我在页面加载的时候会默认查询一次，拿到一个结果集，同时进行分页，分页组件显示没有问题。但是，一旦我按了查询按钮。数据结果变了，但是分页控件并没有更新，还是停留在第一次。之后无论点击多少次查询按钮，分页组件都不会刷新。感觉就像初始化结果后，就再也不会变化了。我之前一直在纠结component中的computed方法何时会被调用。我总以为data里的参数变了。computed就会被调用。可做了很多次测试都发现，component中的computed方法只有在初始化的时候，才会被调用。之后就不会了。网上查了好多资料，都没有什么相关内容。我也不知道为什么？请大神们指教。

后来我查询代码，发现，Vue.component("page", {})与var vm = new Vue({});模块是平级的。于是我将Vue.component("page", {});全局注册组件的方法，放到了。var vm = new Vue({});模块的method模块下的，getdata方法中，意思是每一次点击查询按钮，都会去注册同样的组件，问题就解决了。这样每一次点击查询按钮就会同时刷新

但是我觉得这样的方式是不正确的，因为这样就意味着，每次查询都要重新注册一个分页控件。实在不合理。可我接触vue的时间太短了。只能想到了这个方式，先解决问题。请vue大神们看到这篇文章，可以帮小弟修改一下代码，让他变得更加合理~~~