uni.showModal({
title: '提示',
content: '删除后不可恢复!',
success: function (res) {
if (res.confirm) {
console.log('用户点击确认');
this.deleteShare(id);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
场景:
现在有一个删除提示框,
用户点击确认后调用methods中的deleteShare方法
但是却会报错:deleteShare方法未定义
解决方法:
第一步:定义全局变量that
<script>
import store from '@/store'
import {getShareDetail,deleteShareDetail} from '@/api/Share/index.js'
var that //定义变量that
export default {}
//...此处省略多余代码
</script>
第二步:在生命周期created中使that = this
<script>
import store from '@/store'
import {getShareDetail,deleteShareDetail} from '@/api/Share/index.js'
var that
export default {
created(){
that = this
},
.......
第三步:在success回调方法中使用that指向需要调用的方法(deleteShareDetail)
<script>
import store from '@/store'
import {getShareDetail,deleteShareDetail} from '@/api/Share/index.js'
var that
export default {
created(){
that = this
},
data() {
return {
ShareDetailPicture:[],
}
},
methods: {
deleteShare(id) {
deleteShareDetail(id).then((res)=>{
uni.showToast({
title:"删除成功"
})
}).catch((err)=>{
console.log("网络异常")
})
},
deleteConfrim(id,form){
uni.showModal({
title: '提示',
content: '删除后不可恢复!',
success: function (res) {
if (res.confirm) {
that.deleteShare(id); //这里使用that
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
},
onLoad(option){
this.role = store.getters.roles
this.form.sessionId = option.Id
},
onShow(){
this.getShare();
}
}
</script>
完成以上步骤就可以正常调用了。
方法2:利用箭头函数this为静态的特性。
箭头函数向外层作用域中一层层查找this,直到有this的定义
详见:Vue学习之箭头函数的使用和this指向
步骤:
uni.showModal({
title: '提示',
content: '删除后不可恢复!',
success: res => { //这里改写成箭头函数就可以了
if (res.confirm) {
console.log('用户点击确认');
this.deleteShare(id);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});