如果不使用 created() 生命周期钩子或展开运算符 (...)，则 vue.js 中的空白屏幕

Question

The following example gives me a blank screen! ( 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()
  //}
})

Nevertheless it does work if:

1.) Either using objectFromApi function directly in the created life cycle hook (what I don't want!)

created() {
  this.objectFromApi()
}

2.) Or (without the use of created life cycle hook) if I go directly into the nested results array and spread the objects out like this (what I also don't want!)

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
)

When using method 2.) of course the v-for loop has to look different:

v-for="obj in myObject" instead of v-for="obj in myObject[0].results"

What is wrong with my initial example?

Answer 1

When the component is first rendering the array myObject will be empty.

During rendering it attempts this:

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

The value of myObject[0] will be undefined . Attempting to access the results property of undefined will result in an error. This error will cause rendering to fail. Nothing will be shown, even the parts that didn't fail.

There are various ways to fix this problem. You could prepopulate the data with suitable empty properties:

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

Alternatively, as you've noted, you could change the loop to use v-for="obj in myObject" , changing objectFromApi accordingly to only store the results array in myObject . Even if you don't want that exact change some similar change is probably a good idea because the [0] part strongly suggests you've got a problem with your data model. The key thing here is that it avoids trying to access nested objects that don't exist. The use of the spread operator in your second example is largely irrelevant.

Or you could skip the loop in the template:

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