Question

这是关于聊天消息的。我有这个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>

输入数据：

alignement: 'left',
messages : [
{sender_name: 'A', text: 'lorem ipsumA', date: '...'},
{sender_name: 'B', text: 'lorem ipsumB', date: '...'},
{sender_name: 'C', text: 'lorem ipsumC', date: '...'},
{sender_name: 'C', text: 'lorem ipsumCbis', date: '...'},
{sender_name: 'B', text: 'lorem ipsumBbis', date: '...'},
...
]

我想添加css'left'或'right'，但仅在sender_name更改时更改。所以我必须检查上一个元素。

我尝试过这种方法：

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.

该怎么办？感谢您的帮助。

Answer 1

正如Decade Moon在评论中所说-渲染时不要改变状态。此外，还有许多可能的适当解决方案。这不是关于“上一个是什么”，而是关于我是否正确理解了“如果我是发件人”？：）

因此，我将在mounted上预先准备数据，并为每条消息添加属性“ left”或“ right”。

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

甚至更好-调用一种方法来添加处理所有检查的css类-您将来可能希望更改其样式，因此只需调整该类就足够了。

这一切都与数据有关，您拥有世界上所有的灵活性，因此不要害怕使用它并陷入某些情况下-以其他方式解决它们。

VueJS v-for循环，前一个元素具有条件

1 个答案: