Question

我正在为大量卡片实施分页，我一次显示10张卡片，希望通过单击两个按钮显示10张下一张（或10张上一张）。

这是我的方法：

export default {
  ...
  data() {
    return {          
      pois: [], // My list of elements
      pageNumber: 0, // Current page number
    };
  },
  props: {
    size: {
      type: Number,
      required: false,
      default: 10, // 10 cards per page
    },
  },
  computed: {
    pageCount() {
      // Counts the number of pages total
      const l = this.pois.length;
      const s = this.size;
      return Math.floor(l / s);
    },
    paginatedData() {
      // Returns the right cards based on the current page
      const start = this.pageNumber * this.size;
      const end = start + this.size;
      return this.pois.slice(start, end);
    },
  },
  methods: {
    nextPage() {
      this.pageNumber += 1;
    },
    prevPage() {
      this.pageNumber -= 1;
    },
  }
  ...
};

还有我的模板：

<div v-for="poi in paginatedData" :key="poi.id">                
  <card :poi="poi"/>
</div>

一切正常（页面更改确实会在控制台中输出正确的卡片），即使每次单击都会调用计算方法，我的列表也不会更新。

是什么原因导致此问题？我已经读过它可能与缺少的:key值相关联，但是它在那里，并且没有数据在阵列中直接和手动更新，只是切出了。

Answer 1

首先，请务必尝试进行此更改，并在评论中让我知道它是否有效。

export default {
  ...
  computed: {
    paginatedData() {
      ...
      const end = start + this.size - 1;
      ...
    },
  ...
};

是的：尝试使用索引代替id：

<div v-for="(poi, idx) in paginatedData" :key="idx">                
  <card :poi="poi"/>
</div>

计算数据更新后Vue v-for列表未重新呈现

1 个答案: