Vue - элемент в цикле - без дубликатов

Question

У меня есть цикл, настроенный в vue, я нацеливаюсь на канал json (который является еще одним кодовым блоком для демонстрации). Лента фильтруется в алфавитном порядке, я хочу, чтобы каждый сгруппированный набор заголовков (т.е. все, которые начинаются с A, все, которые начинаются с B и т. Д., Имели один соответствующий заголовок). Я думал, что способ сделать это состоит в том, чтобы гарантировать, что каждый заголовок будет обманут. Часть в шаблоне, которую я ищу для дедупликации:

<h1>{{ accordion.heading[0]}}</h1>

Я настроил здесь кодовую ручку https://codepen.io/struthy/pen/rNBErWM

Я попытался написать вычисляемую функцию, которая дедуплицирует -не уверен, как применить это к шаблону.

Array.prototype.unique = function () {
return this.filter(function (value, index, self) {
    return self.indexOf(value) === index;
});
};

String.prototype.queryStringParamaterValue = function (key) {
key = key.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]".concat(key, "(=([^&#]*)|&|#|$)")),
    results = regex.exec(this);
if (!results) return null;
if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " "));
};

var vm = new Vue({
el: "#glossary-page",
data: {
    accordions: [],
    accordionHeading: [],
    firstLetters: []
    //  markers: []
},

created() {
    axios
        .get(`accordions.json`)
        .then(response => {
            // JSON responses are automatically parsed.
            this.accordions = response.data;
            this.accordionHeading = this.accordions
                .map(function (x) {
                    return x.heading[0];
                }).sort().unique();
        });
}, // end created

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

methods: {
    toggle: function () {
        this.accordionOpen = !this.accordionOpen;
    },



}, // end methods
});


<div id="glossary-page">

<div class="container">

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

</div>

Answer 1

Вы должны создать список вручную, вот некоторая логика, которую вы можете использовать:

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>