0

我正在尝试在 Vue.js 上为我的网站创建分页。我有两个按钮：

<button @click.prevent="onPrevBtnClick">previous</button>
<button @click.prevent="onNextBtnClick">next</button>

哪个传递给我的主要组件：

methods: {
    onPrevBtnClick () {
      this.$emit('prev-button')
    },
    onNextBtnClick () {
      this.$emit('next-button')
    }
  }

基本上，我想根据 currentPage 进行查询

async fetchMovies () {
  try {
    const fetchData = await axios.get(`${process.env.VUE_APP_API_URL}/discover/movie&api_key=${process.env.VUE_APP_API_KEY}&page=${this.currentPage}`)
    this.movies = {...fetchData.data.results}
  }
  catch (e) {
    console.log(e)
  }
},
async onPrevBtnClick () {
  this.currentPage--
},
async onNextBtnClick () {
  this.currentPage++
}

我尝试通过一种方法更改它们，也尝试通过计算但由于某种原因不会动态更改。

我会很感激你的帮助。

4

1 回答 1

0

如果您想this.movies在用户单击“上一个”或“下一个”时进行更新，则必须调用and方法fetchMovies中的方法。目前并且只有 update ，但这样做不会自动导致执行 if是一个方法。onPrevBtnClickonNextBtnClickonPrevBtnClickonNextBtnClickthis.currentPagefetchMoviesfetchMovies

另一种方法是创建this.movies一个基于this.currentPage并摆脱 的fetchMovies计算属性，将该逻辑放入计算属性中。

查看Computed Properties and Watchers指南了解更多信息。要理解的关键是：

  1. “计算属性根据其反应性依赖关系进行缓存。计算属性只会在其某些反应性依赖关系发生变化时重新评估。”
  2. 方法永远不会像计算属性一样自行重新评估。方法需要您显式调用它们。
于 2020-09-18T20:29:59.060 回答