vue前端分页过滤

<template>
  <div>
    <h1>商品页面</h1>
    <!-- 写搜索的样式 -->
    <input type="text" v-model="name" />
    <!-- 绑定事件 -->
    <button @click="search">查询</button><br /><br />
    <table border="1px" width="700px" align="center">
      <tr>
        <th>编号</th>
        <th>名字</th>
        <th>数量</th>
        <th>价格</th>
        <th>产地</th>
      </tr>
      <tr v-for="(item, i) in lst" :key="i">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.num }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </table>
    <br />
    <!-- 给两个按钮绑定相同的事件 -->
    <!-- 给两个事件传递不同的路由参数 -->
    <!-- v-show v-if:后边为true显示对应的内容 为false时不显示对应的内容 -->
    <button v-show="previous" @click="getList(previous)">上一页</button> |
    <button v-show="next" @click="getList(next)">下一页</button>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      lst: [],
      name: "",
      // 定义两个空变量用来接收上一页下一页的路由
      previous: "",
      next: "",
    };
  },
  methods: {
    search() {
      // 点击按钮向搜索的接口发起请求，获取搜索出来的数据
      Axios.get("http://127.0.0.1:8000/good/?search=" + this.name)
        .then((resp) => {
          console.log(resp.data);
          // 分页提供的数据存在results里
          this.lst = resp.data.results;
          // 给next和previous赋值---不赋值点击上下一页按钮报404错误
          this.previous = resp.data.previous;
          this.next = resp.data.next;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // url:代表点击上一页按钮和下一页按钮传递过来的路由(接口)
    getList(url) {
      Axios.get(url)
        .then((resp) => {
          console.log(resp);
          // 将数据赋值给lst
          this.lst = resp.data.results;
          // 给变量赋值
          this.previous = resp.data.previous;
          this.next = resp.data.next;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>