vue分页

<template>
    <div>
        <table>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>地址</td>
                <td>年龄</td>
            </tr>
            <tr v-for="goods in goods_list">
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.address}}</td>
                <td>{{goods.age}}</td>
            </tr>
        </table>
        <!-- 分页的展示 -->
        <div>
            <button v-for="i in page_list" @click="get_num($event)" :value="i">{{i}}</button>
        </div>

    </div>
</template>

<script>
import {drf_page} from '../../axios_send/api'

export default {
    name:"page_test",
    data(){
        return{
            goods_list: [],
            page_list: [],
            p: '1'
        }
    },
    methods:{
        get_goods(){
            var params = {"page_id":this.p}
            drf_page(params)
            .then(res=>{
                console.log(res.data)
                this.goods_list = res.data
                this.page_list = res.page_list
            })
        },
        get_num(event){
            this.p = event.target.value  // 通过事件获取button的value
            console.log(this.p)
            this.get_goods()  // 点击按钮的时候，重新调用get_goods方法
        }
    },
    created(){  // 页面加载的时候，自动执行下面方法
        this.get_goods()
    }
}
</script>