Следующая страница не открывается.Проблема с нумерацией страниц - PullRequest
Новая
       25

Следующая страница не открывается.Проблема с нумерацией страниц

1 голос
/ 14 марта 2019

Мне нужно сделать нумерацию страниц в моей задаче, но она не работает.

Я сделал две кнопки, к которым я прикрепил событие «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;
    });
  }
};

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Метод created вызывается только при создании компонента.Чтобы сделать запрос GET каждый раз, когда счетчик увеличивается или уменьшается, используйте watches ссылку .

Ваш пример станет: 

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
          })
      }
   }
}
1 голос
/ 14 марта 2019

Вам необходимо создать наблюдатель для вашего счетчика, который запускает метод загрузки.Таким образом, каждый раз, когда меняется ваш счетчик, вы загружаете правильные сообщения для страницы в разбитых на страницы результатах. 

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
                })
        }
    }
}
0 голосов
/ 14 марта 2019

Может быть, это может помочь вам.https://scotch.io/courses/getting-started-with-vue/vue-events-build-a-counter Я не знаю vue, но похоже, вам нужна функция для загрузки новых данных

...