问答

点击搜索按钮van-list请求了两次第一页

作者:admin 2021-05-09 我要评论

界面上有一个输入框和一个按钮,输入值之后点击搜索按钮,将列表清空从第一页开始请求。我如果不手动 this.getList() 的话, van-list 不会自动请求。但是我手动...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

界面上有一个输入框和一个按钮,输入值之后点击搜索按钮,将列表清空从第一页开始请求。我如果不手动this.getList()的话,van-list不会自动请求。但是我手动请求后,van-list会请求两次第一页,我要怎么写才不会请求两次呢?

页面的搜索框如图(搜索框下面是列表):
image.png

<template>
  <div class="page">
    <div class="input-box">
      <img src="@/assets/searchMark.png" alt="" class="mark">
      <input type="text" class="input1" placeholder="输入关键词" v-model="search">
      <van-button type="info" @click="toSearch()">搜索</van-button>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败,点击重新加载"
      finished-text="没有更多了"
      @load="getList"
    >
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      searchVal: '%',
      finished: false,
      currentPage: 1,
      list: [],
      province: '',
      type: '',
      level: '',
      error: false,
      loading: false,
      pageSize: 10,
    }
  },
  watch: {
    search: function(val) {
      if (!val) {
        this.searchVal = '%'
        this.currentPage = 1
        this.finished = false
        this.getList()
      }
    }
  },
  methods: {
    toSearch() {
      this.searchVal = this.search
      this.list.splice(0, this.list.length)
      this.currentPage = 1
      this.finished = false
      this.getList()
    },
    getList() {
      getSchoolList({
        universityName: this.searchVal,
        page: this.currentPage,
        pageSize: this.pageSize,
        province: this.province,
        type: this.type,
        level: this.level
      }).then(res => {
        this.loading = false
        if (res.code === 0) {
          if (this.currentPage == 1) {
            this.list.splice(0, this.list.length)
          }
          if (res.data.length < this.pageSize) {
            this.finished = true
          } else {
            this.currentPage += 1
          }
          this.list = this.list.concat(res.data)
        } else {
          console.log(res.msg)
        }
      }).catch(() => {
        this.loading = false
        this.error = true;
      })
    },
  }
}
</script>
###

解决了。应该是vant-list会监听finished的变化,如果在清空输入框前finished的值为true的话,再重新置为false,会自动请求一次,加上手动的一次,一共两次。如果一开始为false,则清空后不会自动请求。所以把watch的代码改成如下:

watch: {
    search: function(val) {
      if (!val) {
        this.searchVal = '%'
        this.currentPage = 1
        if (this.finished) {
          this.finished = false
        } else {
          this.getList()
        }
      }
    }
  },
###

添加
:immediate-check="false"

<van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      :error.sync="error"
      error-text="请求失败,点击重新加载"
      finished-text="没有更多了"
      @load="getList"
    >
    </van-list>

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • grom设置json默认值

    grom设置json默认值

  • Vue路由报错,看着没问题

    Vue路由报错,看着没问题

  • 思否邮箱登录为什么区分大小写了呢?

    思否邮箱登录为什么区分大小写了呢?

  • 有没有能够直接上传markdown文件作为博

    有没有能够直接上传markdown文件作为博

腾讯云代理商
海外云服务器