[Vuejs]-Vue JS – Apply certain classes to elements in a v-for loop according to data from previous elements in the loop

by

0👍

I ended up figuring out a solution to this, not sure if its the best one but here goes.

Basically, I maintain an array parallel to the notes array that determines which order- class each array index should have. As it is dependent on the notes attribute, I make it a computed property, so that I can use the notes attribute and it automatically updates when the notes list changes. The file now looks like this (with some code related to posting new notes and editing existing ones removed for clarity)

<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>

There may very well be better solutions and I encourage anyone who happens upon this to post theirs if they have one, but as I found a solution that works for me I decided to post it for anyone else running into the same issue.

Leave a comment