Почему мой v-for не работает должным образом, отображает одно число, а не несколько, как должно

Question

Почему мой v-for не работает должным образом, отображает одно число, а не несколько, как должно.Задача состоит в том, что вам нужно сделать разбиение на страницы, и чтобы отобразить все страницы от 1 до n страниц, мне нужно знать их количество, я вроде сделал свойство очищаемым, но когда я вставляю его в html в v-для цикла отображается только 1.

Мой html:

<span v-for="n in evenPosts" :key="n.id">{{ n }} </span>

My Vue js:

import axios from 'axios';

export default {
  name: 'app',
  data () {

    return{
      counter: 1,
      zero: 0,
      posts: [],
      createTitle: '',
      createBody: '',
      visiblePostID: '',

    }
  },

  watch: {
      counter: function(newValue, oldValue) {
          this.getData()
      }
  },
  created(){
      this.getData()
   },

   computed: {
     evenPosts: function(){
       return Math.ceil(this.posts.length/10)
     }
   },
methods: {
      getData() {
          axios.get(`http://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=10`).then(response => {
              this.posts = response.data
          })
      },
    }

В моем API всего 98 сообщений, поэтому страниц должно быть не 1, а10, поскольку на одной странице 10 сообщений

Снимок экрана

Answer 1

Вы устанавливаете ограничение на вызов axios равным 10. Это означает, что вы получаете 10 сообщений, а не 98, и у вас есть только одна страница.

Проверьте это скрипка длялимит запроса 100.

axios.get(`https://jsonplaceholder.typicode.com/posts?_start=${this.counter}+${this.zero}&_limit=100`).then(response => {
          this.posts = response.data
      })

Answer 2

Основной ответ: ваше вычисленное свойство возвращает число.Как вы можете видеть на этом скриншоте

Я действительно не знаю, чего вы пытались достичь с помощью этого вычисляемого свойства, но если вы будете выполнять итерации, например, по сообщениям, это будетРабота.Конечно, вам нужно будет разобрать и делать вещи ...