Vue - 循环中的项目 - 没有重复

Question

我在 vue 中设置了一个循环，我的目标是一个 json 提要（这是演示的另一个代码笔）。提要按字母顺序过滤，我希望每组标题（即所有以 A 开头、所有以 B 开头等都具有一个相关标题）。我在想一种方法来确保每个标题都经过重复数据删除。我要删除的模板部分是

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

我在这里设置了一个codepen 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>