javascript - 如果不使用 created() 生命周期钩子(Hook)或传播运算符 (...)，vue.js 中的空白屏幕

Question

下面的例子给我一个空白屏幕(jsfiddle here)。即使与循环无关的部分也不会被渲染。

HTML:

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

JavaScript:

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()
  //}
})

尽管如此，它在以下情况下仍然有效:

1.) 直接在 created 生命周期钩子(Hook)中使用 objectFromApi 函数(我不想要的!)

created() {
  this.objectFromApi()
}

2.) 或者(不使用 created 生命周期 Hook )如果我直接进入嵌套的 results 数组并像这样展开对象(我也不要!)

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
)

当使用选项 2.) 当然 v-for 循环必须看起来不同:

v-for="obj in myObject" 而不是 v-for="obj in myObject[0].results"

我最初的例子有什么问题？

Answer 1

当组件第一次渲染数组时 myObject将是空的。

在渲染过程中它尝试这样做:

<div
  v-for="obj in myObject[0].results"
  :key="obj.id"
>

myObject[0] 的值将是 undefined .正在尝试访问 results undefined的属性(property)将导致错误。此错误将导致渲染失败。什么都不会显示，即使是没有失败的部分。

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

data: {
  myObject: [
    {
      results: []
    }
  ]
}

或者，如您所述，您可以更改循环以使用 v-for="obj in myObject" , 改变 objectFromApi因此只存储 results myObject 中的数组.即使您不想要那个确切的更改，一些类似的更改也可能是个好主意，因为 [0]部分强烈建议您的数据模型有问题。这里的关键是它避免尝试访问不存在的嵌套对象。在你的第二个例子中使用传播运算符在很大程度上是无关紧要的。

或者您可以跳过模板中的循环:

<template v-if="myObject[0]">
  <div
    v-for="obj in myObject[0].results"
    :key="obj.id"
  >
    ...
  </div>
</template>