为什么我的v-for无法正常工作，显示一个数字而不是应显示的几个数字

Question

为什么我的v-for不能正常工作，所以显示一个数字而不是几个数字。该任务由您需要进行的分页组成，为了显示从1到n页的所有页面，我需要知道它们的编号，我已经将该属性清除了，但是当我将其插入到v-对于循环，仅显示1。

我的html：

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

我的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个帖子

Screenshot

Answer 1

基本答案是，您的计算属性返回一个数字。 如您在此屏幕截图中所见

我真的不知道您想使用该计算出的属性来实现什么，但是如果您对例如帖子进行迭代，那么它将起作用。 当然，您将需要解析和处理...

Answer 2

您正在将axios调用的限制设置为10。这意味着您将获得10个帖子而不是98个帖子，并且只有一页。

选中此fiddle的请求限制为100。

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