Vue.js v-for 循环中访问下一个值时如何避免错误？

2024-03-14 16:17:52

在 Vue v-for 循环中安全访问下一个值

在 Vue.js 的 v-for 循环中，我们经常需要比较当前项和下一个项。然而，直接访问下一个项的属性会导致错误。本篇文章将探索这个问题并提供一个优雅的解决方案。

问题：访问下一个值导致错误

<template>
  <li v-for="item in items">
    {{ items[index + 1].message }}
  </li>
</template>

在上面的代码中，我们尝试访问 items 数组中当前项后面的项的 message 属性。然而，这会导致错误，因为 items[index + 1] 可能超出范围。

解决方案：使用计算属性

为了解决这个问题，我们可以使用计算属性来提前获取下一个值。

<script setup>
const nextValue = computed(() => {
  return items.value.slice(1)[0]
})
</script>

<template>
  <li v-for="item in items">
    {{ nextValue.value?.message }}
  </li>
</template>

这个计算属性返回一个数组中当前项之后的第一个项。通过在模板中使用 nextValue.value?.message，我们可以安全地获取下一个值的 message 属性，而不会遇到错误。

代码示例

<template>
  <ul>
    <li v-for="item in items">
      <p>{{ item.message }}</p>
      <p v-if="index < items.length - 1">Next value: {{ nextValue.value.message }}</p>
    </li>
  </ul>
</template>