vue.js展示pagehelper数据并修改

vue.js遍历数据，并向下加载更多。

<template v-for="ms,pidx in messages">
    <div class="m,idx in ms">
        <div class="date-span"> <span>{{m.a }}</span><span>{{m.b }}</span></div>
            <div class="jpkcD1">
            <div style="margin-bottom: 10px;">
                <span @click="updateC(pidx,idx,m.id,m.c)">{{m.c }}</span> <!-- 点击修改c的值 -->
            </div>
        </div>
    </div>
</template>


<div class="nono" id="" style="margin-bottom:10px;">
    <span v-if="show">暂无更多</span>
    <span v-else @click="getData()">查看更多</span>
</div>

<script>
new Vue({
      el: '#app01',
      data: {
        messages:[], //定义空数组，
        page:{"pageNum":0}, //定义初始page对象
        show:true
      },
      mounted:function(){  //加载页面时直接执行getDate()获取第1页数据
         this.getData();
      },
      methods:{
          getData(){
              var self = this //这里先将vue实例的this赋值，ajax方法中的this为windows的。
                axios.get("getOrderMessage",{
                    params: {
                        pageNum:self.page.pageNum+1, //每次获取下一页，当前页码+1
                        pageSize:5
                    }
                }).then(function(response) {
                    self.messages.push(response.data.page.list); 
                    self.page = response.data.page; 
                    if (self.page.pages != self.page.pageNum){ //判断总页数是否为当前页
                        self.show = false;
                    }else{
                        self.show = true;
                    }
                })     
          },
          updateC(pidx,idx,id,m.c){
          var c = "new.c";
          this.messages[pidx][idx].c = c; //修改页面遍历后的c的值
          axios.post("updateC",{ //ajax修改数据库中c的值
            params: {
                id:id,
                c:c
            }
            }).then(function(response) {
                //
            })  
      }
      }
    })
</script>

 

来源：https://www.cnblogs.com/zd1009/p/11694902.html