[Vuejs]-Vue – Item in loop – no duplicates

by

0👍

You have to create the list manually, here is some logic you could use:

sortedArticles: function () {
    _this = this;

    let articles = _this.accordions
        .sort(function (a, b) {
            return a.heading < b.heading ? -1 : a.heading > b.heading ? 1 : 0;
        });

    let result = []
    let previous = null
    articles.forEach(element => {
      if (previous == null || previous.heading[0] != element.heading[0]) {
        if (previous != null) {
           result.push(previous) 
        }
        previous = { heading: element.heading[0], accordionOpen: true, descriptions: [] }
      }
      previous.descriptions.push(element.heading)
    })

    if (previous != null) {
      result.push(previous)
    }

    return result;

HTML: 

<div v-for="(accordion, index) in sortedArticles" :key="accordion.index">
                <h1>{{ accordion.heading[0] }}</h1>
                <dt v-on:click="accordion.accordionOpen = !accordion.accordionOpen"
                    v-bind:class="{ active: accordion.accordionOpen }">{{ accordion.heading }}
                </dt>
                <dd  v-for="desc in accordion.descriptions">{{ desc }}</dd>
            </div>

Leave a comment