Cannot read property ‘0’ of undefined

使用element ui 里表单el-table-column功能,点击详情按钮弹出弹窗展示单行的详细信息

表单的代码如下

<div class="table">
      <el-table
        class="shili-table"
        :data="
          virtualmachine.slice((currPage - 1) * pageSize, currPage * pageSize)
        "
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="名称" width="180px">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>名称: {{ scope.row.displayname }}</p>
              <div slot="reference" class="name-wrapper">
                <span class="name">{{ scope.row.name }}</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="显示名称" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>显示名称: {{ scope.row.displayname }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.displayname }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="IP" width="140px">
          <template slot-scope="scope">
            <span> {{ scope.row.nic[0].ipaddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区域名称" width="180px">
          <template slot-scope="scope">
            <span> {{ scope.row.zonename }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="170">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag
                :class="
                  scope.row.state === 'Running'
                    ? 'running'
                    : scope.row.state === 'Stopped'
                    ? 'stopped'
                    : ''
                "
                size="medium"
                >{{ scope.row.state }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" @click="editShow(scope.row)">详情</el-button>
            <el-button
              size="mini"
              type="danger"
              @click.native.prevent="deleteRow(scope.$index, virtualmachine)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

弹窗的代码如下(这个是错误示范,放张截图别急着复制,复制下面的那段…)

然后点击详情按钮就会报错Cannot read property '0' of undefined
后来查阅诸多资料后才得以解开
原因如下:
原因一:
异步数据先显示初始数据，再显示带数据的数据，
原因二:
virtualmachine 刚开始是一个空值,虽然我是在created里加载的数据,但是依旧会报错,三层表达式a.b.c，在对象a中没有对象b，那么读取对象a.b.c中的值，自然会报错。

 data() {
    return {
      virtualmachine: [],//表单的数据
      currentPage1: 2,
      pageSize: 4,
      currPage: 1,
      multipleSelection: [],//存放表单内被勾选中的数据信息
      outerVisible: false,//控制外层
      innerVisible: false,//控制内层弹窗
      editObj: {},//接受单行的数据
      formLabelWidth: '120px',
      search:''
    }
  },

 created() {
    service.get().then((res) => {
      if (res.data.listvirtualmachinesresponse.count > 0) {
        this.virtualmachine =
          res.data.listvirtualmachinesresponse.virtualmachine
      }
    })
  }

axios的封装如下

下面是点击详情按钮后执行的函数

editShow(row) {
      this.editObj = row //利用element ui里scope里row属性将单行显示的数据传递给data内新定义的对象editObj
      this.outerVisible = true //打开弹窗
    },

正常操作时遍历editObj.nic[0].ipaddress是有的,界面是正常的,但是控制台会报错,所以要在最外层的template标签里加上v-if="editObj.nic",editObj里的nic加载好了没,所以是先加载好数据在展示数据
注意，不能用v-show，v-show的机制是加载后，根据条件判断是否显示
所以改进后的代码如下

<template v-if="editObj.nic">
        <el-dialog title="详细信息" :visible.sync="outerVisible">
          <el-form :model="editObj">
            <el-form-item label="名称"  :label-width="formLabelWidth">
              <el-input v-model="editObj.name" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="显示名称" :label-width="formLabelWidth">
                <el-input v-model="editObj.displayname" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="IP" :label-width="formLabelWidth">
                <el-input v-model="editObj.nic[0].ipaddress" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="templatename" :label-width="formLabelWidth">
                <el-input v-model="editObj.templatename" disabled autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
            <div>
              <el-button>{{editObj.state === 'Running'? '停止':editObj.state === 'Stopped'?'启动实例':'删除'}}</el-button>
            </div>
          <el-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body> 
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = true"
              >打开内层 Dialog</el-button>
          </div>
        </el-dialog>
      </template>

弹窗的效果如下