vue和jQuery混用之 ajax调用成功后无法引用vue方法

Ctrl_C_V_Boy

于 2021-07-01 00:20:35 发布

阅读量538

点赞数

CC 4.0 BY-SA版权

分类专栏：开发问题记录文章标签： javascript vue.js jquery

本文链接：https://blog.youkuaiyun.com/Program_boy8899/article/details/118372331

开发问题记录专栏收录该内容

2 篇文章

订阅专栏

本文解决了在使用Vueelement弹框组件时遇到的this.$messageisnotafunction错误问题。通过调整Ajax请求的成功回调函数实现正确显示提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题起因:需要在ajax异步添加操作之后弹框(Vue element弹框组件),但是一直报错this.$message is not a function,经过测试后排除环境问题,因为在ajax之前弹框正常,而且数据正常插入成功,那就是调用success方法的时候报错

有问题代码块:

 $.ajax({
		   type: "POST",
		   url: "${pageContext.request.contextPath}/href/add_href" ,
		   data:{'src_1':this.input },
		   success : function() {
		       this.$message({
		           duration:1000,
		           showClose: true,
		           type: 'success',
		           message: '添加成功!'
		       });
		   },
		   error : function() {
		       vm.$message({
		           duration:1000,
		           showClose: true,
		           type: 'info',
		           message: '添加失败!'
		       });
		   }
		});

报错信息:
通过调用控制台看到报错信息
修改结果:将传统的success修改为这样调用即可

$.ajax({
      type: "POST",//方法类型
      url: "${pageContext.request.contextPath}/href/add_href" ,
      data:{'src_1':this.input },
      // async: false,
      success:((result) =>{
          this.$message({
              duration:1000,
              showClose: true,
              type: 'success',
              message: '添加成功!'
          });
      }),
      error:(() =>{
          this.$message.error({
              duration:1000,
              showClose: true,
              message: '服务器出错!'
          });
      }),
  });

测试完毕,弹框成功!