Vue中能否在v-for循环中提前获取并使用下一个值？

问题出在遍历到最后一个元素时，index+1会超出数组的索引范围，此时items[index+1]是undefined，直接访问undefined.message就会触发报错。

解决方法 #

方法一：判断索引范围

在访问下一个元素的属性前，先检查当前索引是否不是最后一个，避免越界访问：

<script setup>
import { ref } from 'vue'

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

<template>
    <li v-for="(item, index) in items">
        {{ index < items.length - 1 ? items[index+1].message : '无下一项' }}
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</template>

方法二：使用可选链操作符

利用ES6的可选链?.，当左侧值为undefined或null时，表达式会直接返回undefined，不会报错：

<script setup>
import { ref } from 'vue'

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

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

两种方法各有优势：方法一可以自定义无下一项时的显示文本，方法二更简洁，适合不需要额外提示的场景。

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