Javascript vue.js中的空白屏幕，如果未使用created（）生命周期挂钩或展开运算符（…）

下面的例子给了我一个空白屏幕！（）

HTML:

然而，如果：

1.）或者直接在

创建的
生命周期挂钩中使用
objectFromApi
函数（我不想要的！）

2.）或者（不使用
创建的
生命周期挂钩），如果我直接进入嵌套的
结果
数组并像这样展开对象（我也不想要！）

当使用方法2.）时，当然
v-for
循环必须看起来不同：

v-for=“myObject中的obj”
而不是
v-for=“myObject中的obj[0]。结果“

我最初的例子有什么问题
 当组件首次渲染时，数组
myObject
将为空

在渲染过程中，它会尝试以下操作：



myObject[0]
的值将是
未定义的
。试图访问
undefined
的
results
属性将导致错误。此错误将导致渲染失败。不会显示任何内容，即使是没有出现故障的部件

有多种方法可以解决此问题。您可以使用适当的空属性预填充数据：

数据：{
myObject：[
{
结果：[]
}
]
}

或者，正如您所注意到的，您可以将循环更改为使用
v-for=“obj in myObject”
，相应地将
objectFromApi
更改为仅将
结果
数组存储在
myObject
中。即使您不希望进行精确的更改，一些类似的更改也可能是一个好主意，因为
[0]
部分强烈建议您的数据模型存在问题。这里的关键是，它避免了试图访问不存在的嵌套对象。在第二个示例中使用spread运算符在很大程度上是不相关的

也可以跳过模板中的循环：


...
在原始示例中，您从未调用
objectFromApi
，因此
myObject
是一个空数组。因此，
myObject[0]
未定义
，尝试访问
myObject[0]时会出现错误。结果
。无法访问
未定义值的属性
results
。您应该将
包装在
或类似包装中。您仍然会得到一个“空白屏幕”，但这只是因为您没有渲染任何内容。@skille-Thx获取答案。我忘了把其他元素放在那里。请使用一个独立的按钮检查更新的代码，该按钮不可见，因为屏幕仍然是空白的。按钮的存在该模板不会改变第一次呈现模板时的任何事实
myObject[0]
是
未定义的
，因此您会得到一个错误和空白屏幕。再看一次@shirtle所说的内容，并试着思考……但如果我使用展开操作符，为什么会呈现按钮@saitam，因为在该示例中，您的
v-for
直接在
myObject
上循环，因此不会发生错误。该错误是由于尝试访问
myObject[0]
的
results
属性引起的。
<div id="app">
  <button @click="objectFromApi">
    run objectFromApi function
  </button>
  <div
    v-for="obj in myObject[0].results"
    :key="obj.id"
  >
    <p>
      {{ obj.message }}
    </p>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    myObject: []
  },
  methods: {
    objectFromApi: function(){
        this.myObject.push(
        {
          "count": 5,
          "results": [
            {
              "id": 1,
              "message": "object 1"
            },
            {
              "id": 2,
              "message": "object 2"
            }
          ]
        }
      )
    }
  },
  //created() {
  //  this.objectFromApi()
  //}
})

created() {
  this.objectFromApi()
}

this.myObject.push(
  ...{
    "count": 5,
    "next": "http://127.0.0.1:8000/api/someurl/?page=2",
    "previous": null,
    "results": [
      {
        "id": 1,
        "message": "object 1"
      },
      {
        "id": 2,
        "message": "object 2"
      }
    ]
  }.results
)