下一页打不开。分页问题答案

【问题标题】：Next page does not open. Problem with pagination下一页打不开。分页问题
【发布时间】：2019-03-15 18:50:06
【问题描述】：

我需要在我的任务中进行分页，但它不起作用。

我制作了两个按钮，附加了“点击”事件，并在“数据”中注册了一个属性。当我单击按钮时，属性会更改并写入链接，并且以同样的方式将当前的 10 个帖子更改为以下内容。

但由于某种原因，它不能正常工作。有人可以解释我的错误是什么，如果你能推荐一些关于“分页”主题的文章。

这是我的html：

  <button type="button" @click="counter -=1" class="prev">Prev</button>
  <div class="counter">{{ counter }}</div>
  <button type="button" @click="counter +=1" class="next">Next</button>

这是我的 Vue：

export default {
  name: 'app',
  data () {
    return {
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: ''

    };
  },

  created () {
    axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10').then(response => {
      this.posts = response.data;
    });
  }
};

【问题讨论】：

标签： javascript vue.js pagination axios

【解决方案1】：

created 方法仅在创建组件时调用。要在每次计数器增加或减少时发出GET 请求，请使用watches link。

你的例子会变成：

export default {
  name: 'app',
  data () {
    return {
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: '',
    }
  },
  watch: {
      counter: function(newValue, oldValue) {
          this.getData()
      }
  }
  created(){
      this.getData()
   },
   methods: {
      getData() {
          axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10`).then(response => {
              this.posts = response.data
          })
      }
   }
}

【讨论】：

照你说的做了，但是没用。计数器正在更改，但帖子保持不变。
我又试了一次，但还是不行。这是我的 GitHub github.com/belichenk0andreyka/VueAxios/tree/pagination/src
它不起作用，因为您将单引号与撇号混淆了。当您键入 URL 时，您使用的是带有 ${variable} 的单引号。当您使用这种语法 (${variable}) 时，您应该使用撇号而不是单引号。我编辑了我的回答，很抱歉。起初我没有注意到这一点。
非常感谢，抱歉耽误您的时间）））
没问题。使用字符串插值时要小心。 ;)

【解决方案2】：

您需要为触发加载方法的计数器创建一个观察者。这样，每次您的计数器发生变化时，您都会在分页结果中加载该页面的正确帖子。

export default {
    name: 'app',
    data () {
        return{
            counter: 1,
            ...
        }
    },

    created(){
        this.loadPosts()
    },

    watch: {
        counter(newVal, oldVal){
            this.loadPosts()
        }
    },

    methods: {
        loadPosts(){
            axios.get('http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10')
                .then(response => {
                    this.posts = response.data
                })
        }
    }
}

【讨论】：

【解决方案3】：

也许这可以帮助你。 https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter 我不知道vue，但看起来你需要一个函数来加载新数据

【讨论】：