vue 加載問題

<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<div th:include="/common/common::common"></div>
<head>
<meta content="text/html;charset=UTF-8" />
<link rel="stylesheet" th:href="@{/css/common/animate.min.css}">
<link rel="stylesheet" th:href="@{/css/common/nprogress.css}">
<link rel="stylesheet" th:href="@{/css/common/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/css/common/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/common/custom.min.css}">
<script th:src="@{/js/login.js}"></script>
</head>
<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            <div class="col-md-3 left_col">
                <div class="left_col scroll-view">
                    <div th:include="/common/left::left"></div>
                </div>
            </div>
            <div th:include="/common/header::header"></div>
            <div class="right_col" role="main" style="min-height: 100%;"><br>
            
            <div>
              <i-table :columns="columns1" :data="historyData"></i-table>
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-sizer></Page>
            </div>
            </div>
        </div>
    </div>
</body>
</head>
<script>
var vue =  new Vue({
    el: '#app',
    data (){
        return {
        //在腳本中，我們在表格中定義的數(shù)據(jù)和表頭都需要在這里進行綁定，下面是一些假數(shù)據(jù)，其中Columns1中的title表示列明，key表示K-V中的標識
            columns1: [
                {
                    title: '用戶名',
                    key: 'username'
                },
                {
                    title: '郵箱',
                    key: 'email'
                },
                {
                    title: '創(chuàng)建時間',
                    key: 'createTime'
                },
                {
                    title: '更新時間',
                    key: 'updateTime'
                }
            ],
            //接下來綁定數(shù)據(jù)，分別對應前面的列的key值來進行數(shù)據(jù)綁定
            historyData: [],
            // 初始化信息總條數(shù)
            dataCount:0,
            // 每頁顯示多少條
            pageSize:10
        };
    },
    methods: {
        querytable : function(){
          axios.get("/user/getUsers")//post也可以改成get，但需要對應服務端的請求方法
              .then(function (response) {
                  // 保存取到的所有數(shù)據(jù)
                  this.dataCount = response.list.length;
                  // 初始化顯示，小于每頁顯示條數(shù)，全顯，大于每頁顯示條數(shù)，取前每頁條數(shù)顯示
                  if(response.list.length < this.pageSize){
                      this.historyData = response.list;
                  }else{
                      this.historyData = response.list.slice(0,this.pageSize);
                  }
              })
              .catch(function (error) {
                alert(error);
              });
      },
      changepage(index){
          var _start = ( index - 1 ) * this.pageSize;
          var _end = index * this.pageSize;
          this.historyData = response.data.slice(_start,_end);
      },
      //當頁面加載的時候執(zhí)行
         created () {
            querytable();
        }
     }
    });
</script>
</html>

為什么沒加載 methods呢?data都走了

回答

編輯回答

礙你眼

created不應該包在methods里，這兩個是并列的。方法調(diào)用是this.function()

2017年3月14日 08:34

編輯回答

小眼睛

使用this. querytable()

 created () {
   this.querytable()
 }

2018年5月8日 05:52

編輯回答

冷溫柔

methods: {
    querytable : function(){
      axios.get("/user/getUsers")//post也可以改成get，但需要對應服務端的請求方法
          .then(function (response) {
              // 保存取到的所有數(shù)據(jù)
              this.dataCount = response.list.length;
              // 初始化顯示，小于每頁顯示條數(shù)，全顯，大于每頁顯示條數(shù)，取前每頁條數(shù)顯示
              if(response.list.length < this.pageSize){
                  this.historyData = response.list;
              }else{
                  this.historyData = response.list.slice(0,this.pageSize);
              }
          })
          .catch(function (error) {
            alert(error);
          });
      },
      changepage(index){
          var _start = ( index - 1 ) * this.pageSize;
          var _end = index * this.pageSize;
          this.historyData = response.data.slice(_start,_end);
      },
     
},
created () {
    this.querytable();
}

2017年6月29日 22:48