Question

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

LinkedHashMap<String, Double> relWeights = new LinkedHashMap<>();
relWeights.put("Venus", 0.78);
relWeights.put("Mars", 0.39);
relWeights.put("Jupiter", 2.65);
relWeights.put("Saturn", 1.17);
relWeights.put("Uranus", 1.05);
relWeights.put("Neptune", 1.23);

Double temp = (new ArrayList<Double>(relWeights.values())).get(position);

我在https://codepen.io/struthy/pen/rNBErWM此处设置了一个代码笔库

我尝试编写一个可重复数据删除的计算函数-不知道如何将其应用于模板。

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

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>

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

1 个答案: