vue.js динамически добавляется в список компонентов

Question

У меня проблемы с динамическим добавлением в список компонентов.

Я определил список в элементе данных "вещи" документа vue. Для каждого объекта в «вещах» на страницу загружен компонент

  data() {
    return {
      things: []
    }
  }

Я использую что-то вроде кода ниже, чтобы загрузить каждую из вещей на странице.

  <div v-for="thing in things" :key="thing.objectId">

Затем я загружаю больше элементов и добавляю их в список

        let temp = JSON.parse(JSON.stringify(results))
        vm.things = vm.things.concat(temp) 

И когда я запускаю его в dev, я получаю следующее

[Vue warn]: у вас может быть бесконечный цикл обновления в компоненте рендеринга функция.

Кроме сообщения об ошибке, код работает в режиме разработки, но вызывает сбой браузера при запуске в работе.

Я сузил его до этого кода, в цикле есть бит, который выводит заголовок, который является месяцем, к которому принадлежат данные, поэтому он может сказать «январь», затем перечислить все данные в январе, затем на следующий месяц и т. д.

showDate(data) {
  this.currentDataMonth = helperfunctionsgetDate_format_month_year(data)
  if (this.currentDataMonth != this.currentmonth) {
    this.currentmonth = this.currentDataMonth
    return "<h2>" + this.currentmonth + "</h2>"
  } else {
    return ""
  }

Answer 1

Ваша проблема вызвана тем, что вы оба изменяете состояние и используете состояние из одного и того же метода.

showDate(data) {
  this.currentDataMonth = helperfunctionsgetDate_format_month_year(data) // set of the state
  if (this.currentDataMonth != this.currentmonth) { // get of the state
    this.currentmonth = this.currentDataMonth
    return "<h2>" + this.currentmonth + "</h2>"
  } else {
    return ""
  }

Поскольку эти переменные используются непосредственно в вашей функции, сделайте их локальными для функции

showDate(data) {
  const currentDataMonth = helperfunctionsgetDate_format_month_year(data)
  if (currentDataMonth != undefined) {
    const currentmonth = currentDataMonth
    return "<h2>" + currentmonth + "</h2>"
  } else {
    return ""
  }

Поскольку целью кода является перечисление каждого месяца под собственным заголовком, вы должны сделать это, используя вычисляемую функцию для возврата списка данных за месяц, и использовать 2 цикла для циклического перебора этого