Help with v-for list table with headers ... I'm stuck

Support
1

I’m sending a block of JSON from FM to BF

It looks like this:

"music": [{
        "ID": "2AE464EC-FC69-4EE8-80E0-30C2A9ACC09E",
        "keySignature": "F",
        "originalArtist": "Nat King Cole",
        "setBandLineup": "(2) LV & Keys",
        "setEventPortion": "",
        "setLocation": "Studio",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "L-O-V-E",
        "tempoSong": "122",
        "timeSignature": "4/4"
    }, {
        "ID": "66A00601-A72D-4983-A281-1AE88E151399",
        "keySignature": "Bb",
        "originalArtist": "Bonnie Raitt",
        "setBandLineup": "(2) LV & Keys",
        "setEventPortion": "",
        "setLocation": "Studio",
        "setNotes": "Anilee - Duo",
        "setNumber": "Set 1",
        "songName": "I Can't Make You Love Me",
        "tempoSong": "65",
        "timeSignature": "4/4"
    }, {
      etc. etc. etc.

I have a javascript function in my page settings that looks like this:

var result = _.uniqWith(model.music, function(arrVal, othVal) {
  return arrVal.setNumber === othVal.setNumber;
});

model.uniqCat = result

And finally, my HTML to display my data:

<div v-for="header in model.uniqCat">
                <div class="bg-[#822447] text-white font-bold indent-8">{{header.setNumber}} - {{header.setNotes}}</div>
                <div v-for="(line, index) in model.music" v-if="line.setNumber == header.setNumber"
                    class="ml-8 h-8 align-middle text-black font-semibold" :class="index % 2 == 0 ? 'bg-gray-50' : ''">
                    {{line.songName}}
                    <br>
                </div>
                <div class="text-sm text-black font-normal p-1 pull-right mb-0 mr-8"
                    :class="index % 2 == 0 ? 'bg-gray-50' : ''">
                    {{line.setBandLineup}} ({{line.setLocation}} {{line.setEventPortion}})
                </div>
                <div class="text-sm text-black font-normal p-1 pull-right mb-0 mr-8"
                    :class="index % 2 == 0 ? 'bg-gray-50' : ''">
                    {{line.originalArtist}} ({{line.keySignature}} {{line.timeSignature}} {{line.tempoSong}})
                </div>
            </div>

I’ve think I’ve been able to whittle down that for some reason the header in model.uniqCat isn’t functioning properly.

I’ve been stuck on this for days on end without any luck. Does anyone have any insight?

2

I think it’s best if we could get into a call together. You can contact me on Slack to arrange a quick support meeting.