Javascript Vue JS-根据循环中先前元素的数据，将某些类应用于v-for循环中的元素

很抱歉这个冗长的标题，我有一种感觉，这是一个奇怪的特殊边缘案例，没有很多人必须处理

有一些背景，我正在开发一个网络应用程序来跟踪我们商店的电脑维修情况。我们目前有一个，这是我们购买的，由于作者的发行方法，我们可以访问源代码。每次维修都以工单表示，所有工单都有注释。在旧的应用程序中，便笺有用户名、发布日期，左侧有编辑和删除按钮（如果您是管理员或作者），右侧有便笺。如果发布注释的用户在向下移动列表时发生更改，则会交换注释，因此注释位于左侧，用户位于右侧，即

user1 - note text
note text - user2
user3 - note text
user3 - note text
note text - user1

旧的应用程序使用普通的PHP实现了这一点，PHP文件中充满了echo语句。我正在开发的新应用程序有一个laravel后端（利用像Eloquent这样的东西）和一个Vue JS前端（帮助websockets中的实时更新）。因此，在工单页面上，有一个用于注释列表的组件，它将分配给该工单的注释列表作为一个道具，并使用v-for迭代所有注释。我想模仿以前设置中的方向切换功能。我可以通过将每个注释设置为网格容器，并对包含用户信息的列应用order first或order last来实现切换。我正在努力寻找一种方法，在用户更改时切换应用哪个类

起初，我有一个数据属性来跟踪当前的类，因此当用户更改时，我可以检查当前的类，并将其切换到相反的类。但是，这会导致无限渲染循环，因为只要更改该属性，整个注释列表就会重新渲染。它确实实现了我希望在视觉上实现的目标，但它导致了严重的性能问题。然后我尝试使用refs，因此当用户更改时，我可以从refs数组中获取列表中的上一个条目，并检查其类，以查看它必须设置下一个元素order类的顺序类。但是，这不起作用，因为在列表渲染完成之前，将不会填充refs数组，并且我需要在渲染时设置类。我尝试使用computed属性，但它不能接受参数（即，我当前使用的数组的索引与索引-1进行比较），即使可以，也无法在计算新属性时检查该属性的当前缓存值

下面是我正在使用的代码，以供参考，目前我尝试删除了以前的任何方法，因此目前没有用户切换发生

 <template>
    <ul class="list-unstyled">
        <li class="row no-gutters mb-2" v-bind:key="index" v-for="(note, index) in this.notes">
            <note-form-modal :modal-id="'note'+note.noteid+'editModal'" :populate-with="note"></note-form-modal>
            <div class="col-md-1 d-flex flex-column mx-md-3">
                <div class="text-center p-0 m-0">{{note.noteuser}}</div>
                <div class="text-muted text-small text-center p-0 m-0">{{getHRDate(note.notetime)}}</div>
                <div class="btn-group justify-content-center p-0 m-0">
                    <template v-if="authusername === note.noteuser || authusername === 'admin'">
                        <button class="btn btn-sm btn-primary m-1" data-toggle="modal" :data-target="'#note'+note.noteid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
                        <button class="btn btn-sm btn-danger m-1"><i class="fas fa-fw fa-trash-alt"></i></button>
                    </template>
                </div>
            </div>
            <div class="col-md-10">
                <div class="card m-2">
                    <div class="card-body p-2">
                        {{ note.thenote }}
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
import dateMixin from '../mixins/dateMixin'
export default {
    mixins:[dateMixin],
    props: ['initialnotes', 'authusername', 'noteType', 'woid'],
    data () {
        return {
            notes: Object.values(this.initialnotes),
            currentOrder: 'order-first',
            newNote: {
                notetype: this.noteType,
                thenote: '',
                noteuser: this.authusername,
                woid: this.woid
            }
        }
    },
    mounted () {
        Echo.channel('wonotes.'+this.noteType+'.'+this.woid)
            .listen('WorkOrderNoteAdded', (e) => {
                this.notes.push(e.note)
            })
            .listen('WorkOrderNoteEdited', (e) => {
                let index = this.notes.findIndex((note) => {
                    return note.noteid === e.note.noteid
                })
                this.notes[index] = e.note
            })
            .listen('WorkOrderNoteDeleted', (e) => {
                let index = this.notes.findIndex((note) => {
                    return note.noteid === e.noteid
                })
                this.notes.splice(index, 1)
            })
    },
    methods: {
        createNote () {
            axios.post('/api/workorders/notes', this.newNote)
                    .then((response) => {
                        $('#note'+this.noteType+'add').collapse('hide')
                        this.newNote.thenote = ''
                    })
        }
    }
}
</script>

{{note.noteuser}
{{getHRDate（note.notetime）}
{{note.thenote}


从“../mixins/dateMixin”导入dateMixin
导出默认值{
mixin:[dateMixin]，
道具：['initialnotes'，'authusername'，'noteType'，'woid']，
数据（）{
返回{
注释：Object.values（this.initialnotes），
currentOrder:“订单优先”，
新注：{
notetype:this.notetype，
注：''，
noteuser:this.authusername，
沃德：这个，沃德
}
}
},
挂载（）{
Echo.channel（'wonotes.+this.noteType+'.+this.woid）
.listen（'workordernotepended'，（e）=>{
这个。notes。push（e.note）
})
.listen（'workordernotedited'，（e）=>{
让index=this.notes.findIndex（（note）=>{
return note.noteid==e.note.noteid
})
this.notes[索引]=e.note
})
.listen（'workordernotedelected'，（e）=>{
让index=this.notes.findIndex（（note）=>{
return note.noteid==e.noteid
})
本.注释.拼接（索引，1）
})
},
方法：{
createNote（）{
axios.post（'/api/workorders/notes'，this.newNote）
。然后（（响应）=>{
$（'#note'+this.noteType+'add'）.collapse（'hide'））
this.newNote.thenote=''
})
}
}
}

noteType之所以存在，是因为我们有两种不同类型的笔记，一种是客户可以看到的，另一种是只有技术人员才能看到的

---

是不是有什么明显的东西我遗漏了，是不是我把这个东西设计错了，是不是我试图做一些不可能的事情？如果您能提供任何帮助，我将不胜感激，我对这个问题已经束手无策。

我最终找到了解决这个问题的办法，不确定这是不是最好的办法，但现在开始吧

基本上，我维护一个与notes数组并行的数组，该数组确定每个数组索引应该具有哪个

order-

类。由于它依赖于

notes

属性，因此我将其设置为计算属性，以便使用notes属性，并在notes列表更改时自动更新。该文件现在看起来是这样的（为了清晰起见，删除了一些与发布新注释和编辑现有注释相关的代码）

{{note.noteuser}
{{
<template>
    <ul class="list-unstyled">
        <li class="row no-gutters mb-2" v-bind:key="index" v-for="(note, index) in this.notes">
            <div class="col-md-1 d-flex flex-column mx-md-3" :class="noteOrders[index]">
                <div class="text-center p-0 m-0">{{note.noteuser}}</div>
            </div>
            <div class="col-md-10">
                <div class="card m-2">
                    <div class="card-body p-2">
                        {{ note.thenote }}
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
export default {
    props: ['initialnotes'],
    data () {
        return {
            notes: this.initialnotes,
        }
    },
    computed: {
        noteOrders () {
            return this.getNoteOrders(this.notes)
        }
    },
    methods: {
        getNoteOrders(notes) {
            let noteOrders = []
            notes.forEach((note,index) =>{
                if (index === 0) {
                    noteOrders[index] = 'order-first'
                } else if (note.noteuser !== notes[index-1].noteuser) {
                    if (noteOrders[index-1] === 'order-first') {
                        noteOrders[index] = 'order-last'
                    } else {
                        noteOrders[index] = 'order-first'
                    }
                } else {
                    noteOrders[index] = noteOrders[index-1]
                }
            })
            return noteOrders
        }
    }
}
</script>