Question

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

我创建了两个按钮，并附加了“ click”事件，并在“ data”中注册了一个属性。当我单击按钮时，属性会更改并写入链接，并且以相同的方式将当前的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;
    });
  }
};

Answer 1

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

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

Answer 2

仅在创建组件时调用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
          })
      }
   }
}

Answer 3

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

下一页无法打开。分页问题

3 个答案: