标签：editObj read Cannot 报错 scope property 数据 弹窗 row

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>

弹窗的效果如下

标签：editObj,read,Cannot,报错,scope,property,数据,弹窗,row
来源： https://blog.csdn.net/qq_44813690/article/details/114988157

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。