⭐️个人博客:caohongyuan,更多分享,欢迎浏览!⭐️
Vue的Element确实给开发者提供了很大的便捷,比如消息提示中的:this.$message 函数就非常好用。但是在某些情况下是失效的,比如如下代码所示:
onSubmit: function () {
if (this.formInline.title === '') {
// 这里可以成功使用$message函数
this.$message({
message: '失败!',
type: 'warning'
});
} else {
$.post('upload',
{
title: this.formInline.title,
},
function (res) {
// 这里使用$message函数则是失效的
this.$message({
message: '成功!',
type: 'success'
});
});
}
},
可以看到后台返回的数据使用this.$message就会失效,因为 this 指的不再是Vue了,所以... ....
Vue.prototype.$message({
message: '成功!',
type: 'success'
});
使用全局变量Vue.prototype来调$message()就可以了。
或者重新定义this也是可以的。如下:
onSubmit: function () {
var vm = this;
if (this.formInline.title === '') {
// 这里可以成功使用$message函数
this.$message({
message: '失败!',
type: 'warning'
});
} else {
$.post('upload',
{
title: this.formInline.title,
},
function (res) {
// 这里就可以用了
vm.$message({
message: '成功!',
type: 'success'
});
});
}
},
欢迎指导!
千而の大狮子~