Laravel Vue3 Inertia分页器移除上下页链接失败排查

你这段代码的问题出在第一次调用splice移除上一页链接后，原数组的索引结构已经改变，但你用的还是基于原数组获取的nextIndex，自然删不对：

• 假设原数组里上一页链接在索引prevIndex，下一页在nextIndex，当你删掉prevIndex位置的元素后，数组中prevIndex之后的所有元素索引都会往前移一位。
• 这时候原来的nextIndex就失效了——如果nextIndex比prevIndex大，实际下一页链接的索引应该是nextIndex - 1；如果直接用原nextIndex，要么删错元素，要么因为索引超出新数组长度导致splice不生效。
• 另外还有个隐藏问题：你直接修改了props里的数组，这不符合Vue的单向数据流原则，可能引发意外的响应式问题。

这里给你两种靠谱的写法：

方案1：过滤数组（推荐） #

直接过滤掉不需要的链接，不用计算索引，逻辑更清晰，也不会修改原props：

const splicedlinks = computed(() => {
  // 复制原数组，避免修改props
  const links = [...props.links.meta.links];
  // 过滤掉上一页和下一页的链接
  return links.filter(link => {
    return link.label !== "« Previous" && link.label !== "Next »";
  });
});

方案2：调整splice顺序 #

如果一定要用splice，先删索引更大的下一页链接，再删上一页，这样前面的索引不会受影响：

const splicedlinks = computed(() => {
  // 复制原数组，不能直接修改props
  const links = [...props.links.meta.links];
  const prevIndex = links.map(link => link.label).indexOf("« Previous");
  const nextIndex = links.map(link => link.label).indexOf("Next »");

  // 先删索引大的next，再删prev，避免索引偏移
  if (nextIndex !== -1) {
    links.splice(nextIndex, 1);
  }
  if (prevIndex !== -1) {
    links.splice(prevIndex, 1);
  }

  return links;
});

注意：必须复制原数组后再操作，不要直接修改props里的内容，Vue中props是父组件传递的，子组件直接修改会打破单向数据流，导致难以排查的bug。

内容的提问来源于stack exchange，提问作者Metchanisng