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警告]：组件渲染中可能存在无限的更新循环功能。

除错误消息外，该代码在开发人员模式下有效，但在生产环境中运行时会使浏览器崩溃。

我将其范围缩小到此代码，循环中有一点打印出标题，该标题是数据所属的月份，因此它可能是1月，然后列出1月下的所有数据，然后下个月，依此类推

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个循环在其上循环

vue.js动态添加到组件列表

1 个答案: