vue pagination total didn't work

Question

<template>
  ...
  <div class="pagination">
     <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="totalCount">
     </el-pagination>
  </div>
</template>

<script>
    import Vue from 'vue';
    Vue.use(ElementUI);
    export default {
        data() {
            return {
                tableData: [],
                orderTableUrl: setting.orderTableUrl,
                width: 110,
                page_size: 10,
                page_num: 1,
                messages: [],
                totalCount: 100,
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            getTableData: function () {
                let self = this;
                axios.Get({
                    url: self.orderTableUrl,
                    params: {
                        'page_size': self.page_size,
                        'page_num': self.page_num
                    },
                    callback: function (res) {
                        self.tableData = res.data.orders;
                        self.totalCount = res.data.orders_total_pages;
                        console.log(self.totalCount)
                    }
                });
            },
      }    
}

the pagination part use element.ui . Here is my problem: in method callback, console.log can echo real num of total page, but it cannot display on template, and only can see the num 1 of page on window. I'm so puzzled for that. Is it said that vue can immediately show data on change on view

Answer 1

finish the question. the ':total' does work, just surprised that it means the count of objects instead of pages ...