无法使用 vue 更新 for 循环中的动态标题答案

【问题标题】：Can't update dynamic title in for loop using vue无法使用 vue 更新 for 循环中的动态标题
【发布时间】：2018-07-12 13:50:40
【问题描述】：

我有一个对象数组，我想列出当月的标题。并非循环中的每个对象都有标题，如果顺序对象中的月份发生变化，它只会显示标题

因此，例如，对象可能看起来像

data [
    {date:'January', info: 'some other data'},
    {date:'January', info: 'some other data'},
    {date:'February', info: 'some other data'},
    {date:'February', info: 'some other data'},
    {date:'March', info: 'some other data'},
    {date:'March', info: 'some other data'},
];

循环看起来像这样

<div v-for="d in data" :heading="getDate(d.date)" >
   {{ heading }}
  <p> {{ d.info }}</p>
</div>

showDate 函数位于方法部分

  data() {
    return {
      currentmonth: ""
    }
  },
  methods: {
    getDate(date) {
      if (date != this.currentmonth) {
        this.currentmonth = date
        return "<h2>" +  date + "</h2>"
      } else {
        return ""
      }
    }

所以我只想在循环中对象之间的日期发生变化时显示 H2，所以结果是

<div>
  <h2>January<h2>
  <p>some other data</p>
</div>
<div>
  <p>some other data</p>
</div>
<div>
  <h2>February<h2>
  <p>some other data</p>
</div>
<div>
  <p>some other data</p>
</div>
<div>
  <h2>March<h2>
  <p>some other data</p>
</div>
<div>
  <p>some other data</p>
</div>

但我不断得到的结果是

[Vue warn]: You may have an infinite update loop in a component render function.

显然这是因为我的 getDate 检查了 vm 中的日期，并从同一个函数中更新它。我已经尝试过观察者、计算属性，但无法弄清楚这一点。

【问题讨论】：

getDate (index) { if (index === 0 || this.data[index].date !== this.data[index - 1].date) { return this.data[index].date } }

标签： vue.js vuejs2 nuxt.js

【解决方案1】：

我认为你应该调整你的渲染，这样你就不会像实际渲染那样尝试做太多的逻辑。与其交给 Vue 一个日期列表并让它弄清楚如何在渲染中对它们进行分组，不如预先计算分组日期并让 Vue 渲染分组。

function contiguify(arr) {
  const contiguousArr = [];

  for (const d of arr) {
    const lastMonthAdded = contiguousArr.length ?
      contiguousArr[contiguousArr.length - 1].date :
      null;

    if (!lastMonthAdded || d.date !== lastMonthAdded) {
      contiguousArr.push({
        date: d.date,
        infos: [
          d.info
        ]
      });
    } else {
      contiguousArr[contiguousArr.length - 1].infos.push(d.info);
    }
  }
  return contiguousArr;
}

const app = new Vue({
  el: "#app",
  data() {
    return {
      dates: [{
          date: 'January',
          info: 'some other data'
        },
        {
          date: 'March',
          info: 'some other data'
        },
        {
          date: 'January',
          info: 'some other data'
        },
        {
          date: 'February',
          info: 'some other data'
        },
        {
          date: 'February',
          info: 'some other data'
        },
        {
          date: 'March',
          info: 'some other data'
        },
        {
          date: 'March',
          info: 'some other data'
        },
        {
          date: 'February',
          info: 'some other data'
        },
        {
          date: 'March',
          info: 'some other data'
        },
        {
          date: 'March',
          info: 'some other data'
        }
      ]
    };
  },
  computed: {
    contiguousDates() {
      return contiguify(this.dates);
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <div v-for="d in contiguousDates">
    <h2>{{ d.date}}</h2>
    <p v-for="i in d.infos">{{i}}</p>
  </div>
</div>

【讨论】：

【解决方案2】：

最后我通过将数组索引传递给 for 循环来解决这个问题，然后我使用当前索引和上一个索引来比较日期。如果它们不同，我将其打印出来。

【讨论】：