Uncaught TypeError: Cannot read property '' of undefined

• Z时代
• 2024-01-10
• 分类：技术分享

题目描述

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

Uncaught TypeError: Cannot read property 'domain' of undefined
at eval (eval at compileToFunction ([email protected]:13531), <anonymous>:109:79)
at renderFnWithContext ([email protected]:2667)
at renderSlot ([email protected]:2629)
at Proxy.ou.render (VM1965 index.full.js:15)
at renderComponentRoot ([email protected]:1917)
at componentEffect ([email protected]:5353)
at reactiveEffect ([email protected]:407)
at effect ([email protected]:382)
at setupRenderEffect ([email protected]:5336)
at mountComponent ([email protected]: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 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"></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="https://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/[email protected]"></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="https://segmentfault.com/q/1010000039134516/controlPanel.php";}
if(tab.name=="2"){window.location.href="https://segmentfault.com/q/1010000039134516/auctions.php";}
if(tab.name=="3"){window.location.href="https://segmentfault.com/q/1010000039134516/offers.php";}
if(tab.name=="4"){window.location.href="https://segmentfault.com/q/1010000039134516/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>

不是row.xxx

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

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

回答

以上是 Uncaught TypeError: Cannot read property '' of undefined 的全部内容， 来源链接： utcz.com/a/111353.html