识别alpine.js中循环的最后一项

Question

我的alpine.js代码中有一个for循环

<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div class="..."><span x-text="value"></span></div>
</template>

如何将类仅添加到for循环中的最后一项？基本上，我想隐藏最后一个元素，直到一些变量发生变化。

例如这样，但只针对最后一项。

<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div :class="{ 'invisible': !productDActive }" class="..."><span x-text="value"></span></div>
</template>

感谢

Answer 1

如果您可以访问索引，我的第一个想法是检查您在循环中的位置。像这样：

<template x-for="(value, index, collection) in forecastQ4Values" :key="index">
<div :class="{ 'invisible': (forecastQ4Values.size == index+1) }" class="..."><span x-text="value"></span></div>
</template>