Vue.js VueJS v-for循环，条件在前一个元素上

这是关于聊天信息的。我有一个VueJS模板：

<div class="container" v-for="(m,i) in messages">
    <p>{{ m.text }}</p>
    <span :class="cssAlignement(m.sender_name,i)">{{ m.sender_name }} - {{ m.date }}</span>
</div>   

我想添加css“left”或“right”，但仅当发件人名称更改时才会更改。所以我必须检查前面的元素

我尝试过这种方法：

cssAlignement: function(name, index) {
    if(index>0 && name!==this.messages[index-1].sender_name) {
        this.alignement = this.alignement==='left'?'right':'left';
        }
    return this.alignement;
    },     

但是我得到了错误

[Vue warn]: You may have an infinite update loop in a component render function.

怎么办？

---

感谢您的帮助。

正如Deceday Moon在评论中所说的那样-渲染时不要改变状态。还有许多可能的适当解决方案。这不是关于“前一个是什么”而是“如果我是发送者”，如果我没弄错的话

因此，我会预先准备数据，比如在

挂载的
上，并在每条消息中添加属性“left”或“right”

或者直接将我的用户名与发件人的用户名进行内联比较

或者更好——调用一个方法来添加处理所有检查的css类——您可能希望将来对其进行不同的样式设置，因此简单地调整类就足够了

这一切都与数据有关，您拥有世界上所有的灵活性，因此不要害怕使用它并陷入某些情况-用其他方法解决它们。
不要在渲染期间改变组件状态，这一行是罪魁祸首：
this.alignment=…
。
[Vue warn]: You may have an infinite update loop in a component render function.