Uncaught TypeError: Cannot read property '' of undefined

Question

题目描述

Element UI升级为Element Plus后，控制台报错：

Uncaught TypeError: Cannot read property 'domain' of undefined
at eval (eval at compileToFunction (vue@next:13531), <anonymous>:109:79)
at renderFnWithContext (vue@next:2667)
at renderSlot (vue@next:2629)
at Proxy.ou.render (VM1965 index.full.js:15)
at renderComponentRoot (vue@next:1917)
at componentEffect (vue@next:5353)
at reactiveEffect (vue@next:407)
at effect (vue@next:382)
at setupRenderEffect (vue@next:5336)
at mountComponent (vue@next:5294)

页面代码

<div id="app" class="row">
<div class="col-md-8 offset-md-2 mt-3 mb-3">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClickTab">
<el-tab-pane label="OVERVIEW" name="1"></el-tab-pane>
<el-tab-pane label="AUCTIONS" name="2"></el-tab-pane>
<el-tab-pane label="OFFERS" name="3"></el-tab-pane>
<el-tab-pane label="MY WATCHLIST" name="4"></el-tab-pane>
  
<el-form :rules="rules" status-icon>
<div style="margin:0 10px 10px 10px;float:left;display:none" ref="bulkDelete">
<el-button @click="bulkDelete()" >bulkDelete</el-button>
</div>

  <el-table
    :data="tableData.filter(data => !search || data.domain.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :header-cell-style="{'background-color': '#fafafa','color': 'rgb(103, 194, 58)','border-bottom': '1px rgb(103, 194, 58) solid'}"
    
>
    
    <el-table-column
      label="Domains"
      width="200">
        <template slot-scope="{row,$index}">    
                        <el-form-item prop='domain'>
                        <span  v-if="!isSet[$index]"><i class="fal fa-globe"></i> {{row.domain}}</span>
                        <el-input class="edit-cell" v-if="isSet[$index]" v-model="row.domain":disabled="true"/>
                        </el-form-item>
        </template>
    </el-table-column>

    <el-table-column
      label="Status"
      width="250">
        <template slot-scope="{row,$index}">    
                        <el-form-item prop='status'>
                        <span v-if="!isSet[$index]">
                        <i v-if="row.status==='0'" class="fa fa-arrow-right" style="color:#33cb86"></i>  
                        <i v-if="row.status==='1'" class="fa fa-check"></i> 
                            {{row.status==="0"? 'Auction in progress' : ''}}
                            {{row.status==="1"? 'Auction completed' : ''}}
                        </span>
                        <el-input class="edit-cell" v-if="isSet[$index]" 
                        v-model="row.status==='0'? 'Auction in progress' : ''|
                        row.status==='1'? 'Auction completed' : ''" 
                        :disabled="true"/>
                        </el-form-item>
        </template>
    </el-table-column>
    
    <el-table-column
      label="Leading Bid"
      width="120">
                    <template slot-scope="{row,$index}">
                        <el-form-item prop='leadingbid'>
                        <span  v-if="!isSet[$index]">${{row.leading_bid}}</span>
                        <el-input class="edit-cell" v-if="isSet[$index]" v-model="row.leading_bid":disabled="true"/>
                        </el-form-item>
                    </template>
    </el-table-column>
    
    <el-table-column
      label="Your max. bid"
      width="120">
                    <template slot-scope="{row,$index}">
                        <el-form-item prop='row.your_max_bid'>
                        <span  v-if="!isSet[$index]">${{row.price_bid}}</span>
                        <el-input label="sss" class="edit-cell" v-if="isSet[$index]" v-model="row.price_bid"/> 
                        </el-form-item>
                    </template>
    </el-table-column>
    
    <el-table-column
      label="Auction Ending"
      width="200">
        <template slot-scope="{row,$index}">    
                        <el-form-item prop='gmt_remaining'>
                        <span  v-if="!isSet[$index]">{{row.gmt_remaining}}</span>
                        <el-input class="edit-cell" v-if="isSet[$index]" v-model="row.gmt_remaining":disabled="true"/>
                        </el-form-item>
        </template>
    </el-table-column>
    
    <el-table-column>
        <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="search domains..."/>
      </template>
                    <template slot-scope="{row,$index}">
                        <span>
                            <el-button type="success" icon="el-icon-check" circle @click.native="handleSave($index, row);open" v-if="isSet[$index]"></el-button>
                            <el-button type="info" icon="el-icon-close" circle @click.native="handleCancel($index, row)" v-if="isSet[$index]"></el-button>
                            <el-button type="primary" icon="el-icon-edit" circle @click.native='handleEdit($index, row)' v-if="!isSet[$index]" :disabled="row.status==='0'?false:true"></el-button>
                        </span>
                    </template>
                </el-table-column>
  </el-table>
  
<el-pagination
      v-show="isPage"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="page.totalCount"
      background
      style="float:right;margin:10px 20px 0 0;">
</el-pagination>

  </el-form>
  </el-tabs>
</div></div>



</div>    
<div id="myfooter"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type= "text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" type= "text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" type= "text/javascript"></script>
<script src="https://www.hhh.org/template/template.js" type= "text/javascript"></script>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>



<script>$("#myfooter").load("https://www.hhh.org/template/footer.html");</script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

<script>
var Main = {
    data() {
        
      return {
        activeName: "1",
        tableData: [],
        search: '',
        isSet: [],//编辑状态
        rules: {dprice:[{}]},
        page: {
        currentPage: 1, 
        pageSize: 10, 
        totalCount: 0 
        },
        isPage: false,
        multipleSelection: [],
      }
    },

    mounted: function(){
    this.getList();
    //初始化list，并给每行isSet附初始值
    for(let i = 0; i < this.tableData.length; i ++) {
    this.isSet[i] = false
    }
    },
    
    methods: {
        handleClickTab(tab, event) {
        if(tab.name=="1"){window.location.href="controlPanel.php";}    
        if(tab.name=="2"){window.location.href="auctions.php";}
        if(tab.name=="3"){window.location.href="offers.php";}
        if(tab.name=="4"){window.location.href="watchlist.php";}
        },
      async getList(){
            var that = this;
        $.ajax({
            url: 'controlPanelPro.php',
            type: 'post',
            data :{'type':'load','pageSize':that.page.pageSize,'currentPage':that.page.currentPage},
            success: function (data) {
            that.tableData = JSON.parse(data);
            that.isPage = true;
            var obj = eval(data);
            that.$set(that.page, 'totalCount', obj[0].total);
            }//ajax success
        }); //ajax

        },
        
        handleEdit(index, row){
            //如果已经打开编辑状态，直接返回
            for(let i = 0; i < this.tableData.length; i ++) {
                if(this.isSet[i]){
                    this.$message({
                    message:'You have unsaved changes, please save or cancel.' ,
                    type: 'error' 
                    })
                    return false
                }
             }
        //否则开启编辑状态，一定要使用$set进行更新
         this.isSet[index] = true;
         this.$set(this.isSet,index,true)
        },

        handleCancel(index, row) {
          //关闭开启编辑状态，一定要使用$set进行更新
          this.isSet[index] = false
          this.$set(this.isSet,index,false)
        },

        async handleSave(index, row) {
          var that = this;
          this.$confirm('The information for your domain names will be changed. Continue?', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
            $.ajax({
            url: 'controlPanelPro.php',
            type: 'post',
            data :{'type':'edit','id_domain':row.id_domain,'price_bid':row.price_bid},
            success: function (data) {
                that.getList();
            },//ajax success
            }); //ajax
          this.$message({
            type: 'success',
            message: 'Changes saved'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Changes canceled'
          });          
        });
          //关闭开启编辑状态，一定要使用$set进行更新
          this.isSet[index] = false
          this.$set(this.isSet,index,false)
        },
        
        handleCurrentChange(val) {
        var that = this;
        that.$set(that.page, 'currentPage', val);
        that.getList(val);
        },
        
        handleSelectionChange(val) {
        this.multipleSelection = val;
        },
        
    },
  }
;

Vue.createApp(Main).use(ElementPlus).mount("#app");

</script>
</body>
</html>

Answer 1

不是row.xxx

Answer 2

表格中插槽用法不对。应该是下面这样子的。

<template slot-scope="scope">    
                        <el-form-item prop='gmt_remaining'>
                        <span  v-if="!isSet[scope.$index]">{{scope.row.gmt_remaining}}</span>
                        <el-input class="edit-cell" v-if="isSet[scope.$index]" v-model="scope.row.gmt_remaining" :disabled="true"/>
                        </el-form-item>
        </template>