Javascript 下一页不打开。分页问题

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

我制作了两个按钮，将“单击”事件附加到其中，并在“数据”中注册了一个属性。当我点击按钮时，属性会改变并写入链接，同样地，当前的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>

---

您需要为触发加载方法的计数器创建一个监视程序。这样，每次计数器更改时，您都会在分页结果中为页面加载正确的帖子

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
                })
        }
    }
}

也许这能帮你。

---

我不知道vue，但看起来您需要一个函数来加载新数据

只有在创建组件时才会调用

created

方法。要使

GET

在每次计数器增加或减少时请求，请使用

watchs

您的示例将成为：

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，它不起作用，因为你混淆了单引号和apostrofe。键入URL时，使用的是带有

${variable}

的单引号。当您使用此语法（

${variable}

）时，应该使用撇号而不是单引号。我编辑了我的服装，很抱歉。一开始我没有注意到这一点。非常感谢你，很抱歉占用了你的时间。）没问题。使用字符串插值时要小心。；）

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
          })
      }
   }
}