[Vuejs]-Can't update dynamic title in for loop using vue

by

0👍

I think you should adjust your rendering so that you aren’t trying to do so much logic as you are actually rendering. Rather than hand Vue a list of dates and have it figure out how to group them within the rendering, precompute the grouped dates and just have Vue render the groupings.

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>
👤zero298

0👍

I fixed this in the end by passing the array index into the for loop, then i used the current and previous index to compare the dates. if they were different I printed it out.

👤flo

Leave a comment