Vue中使用eharts点击事件中调用组件或者调用其他方法均无效!!!

不能留白 2020-01-10 02:17:01
我在echarts的点击事件中调用element ui的MessageBox中的this.$message、this.$prompt不起效果,使用alert、prompt就可以;另外我在点击事件中调用其他方法也没有成功;


chart5_1.on('click', function(params) {
var name =params.name;
alert(name);//有效果
let num=prompt('呵呵');//有效果

this.$message({//没效果,但是放在点击事件外面就有效果
type: 'info',
message: '取消'
});
});

...全文
47 1 收藏 10
写回复
10 条回复
不能留白 2020年01月10日
引用 9 楼 JiexC0la 的回复:
引用 8 楼 JiexC0la 的回复:
楼上说的对,你的this没有指向vue实例,你的echart_5.on在哪儿写的
你在点击事件外边var _this = this,在点击事件里边_this.$message()
已经解决了,刚刚回复超了三次不能继续回复,在事件外面把this定义就行

var _this=this
//在事件里面的this改成_this就行

//真的是一个致命的错误
回复 点赞
JiexC0la 2020年01月10日
引用 8 楼 JiexC0la 的回复:
楼上说的对,你的this没有指向vue实例,你的echart_5.on在哪儿写的
你在点击事件外边var _this = this,在点击事件里边_this.$message()
回复 点赞
JiexC0la 2020年01月10日
楼上说的对,你的this没有指向vue实例,你的echart_5.on在哪儿写的
回复 点赞
不能留白 2020年01月10日
引用 4 楼 Hello World, 的回复:
不能在echarts的事件中用this.$message来调用,因为此时的this是chart对象,和elementUI没关系,和VUE也没关系
换成你这个,把id改了也不行

var app1 = new Vue({
            el: '#chart5_1'
        });
app1.$message({
            type: 'success',
            message: '删除成功!'
          });
在事件里面还是弹不出来
回复 点赞
不能留白 2020年01月10日
引用 4 楼 Hello World, 的回复:
不能在echarts的事件中用this.$message来调用,因为此时的this是chart对象,和elementUI没关系,和VUE也没关系
不能用this来调用,那我该用什么来调用?? this.$message放在事件外面是可以的,放在事件里面不行
回复 点赞
不能留白 2020年01月10日
引用 4 楼 Hello World, 的回复:
不能在echarts的事件中用this.$message来调用,因为此时的this是chart对象,和elementUI没关系,和VUE也没关系
用的是echarts,不是v-charts,也是用一个空的div展示,目前需要在echarts的点击事件中弹出一个编辑框,输入后返回,发现只能用prompt,不能用element的$prompt
回复 点赞
Hello World, 2020年01月10日
不能在echarts的事件中用this.$message来调用,因为此时的this是chart对象,和elementUI没关系,和VUE也没关系
回复 点赞
Hello World, 2020年01月10日
不知道你的整个页面是什么样子,用的echarts是不是v-charts?
如果是用百度的echarts来生成图表的话可以用一个空的div来生成一个vue对象,然后引用这个对象的方法,比如下面这样:

<link href="/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />
<div id="app1">
</div>
<script src="/lib/vue/vue.js"></script>
<script src="/lib/element-ui/index.js"></script>
<script>
Vue.use(ELEMENT, { size: 'small', zIndex: 3000 });
var app1 = new Vue({
el: '#app1'
});
</script>

调用时使用:
app1.$message({
type: 'success',
message: '删除成功!'
});

就可以弹出提示框了:
回复 点赞
不能留白 2020年01月10日
之前调用模态框也不行,搞了一天,心态快炸了,虽然可以使用prompt代替,默认的样式还是没有elementui的$prompt好看和居中;
回复 点赞
不能留白 2020年01月10日
因为我在其他位置可以使用elementUI的MessageBox,所以排除了elementUI未引用的问题; 主要的问题在于:点击事件中可以使用alert、prompt,使用element的$message、$prompt就不行,并且也无法调用其他的方法; 看了网上的例子,他们好像都可以调用其他方法,但是并没有使用vue,不知道是不是我使用vue的问题。。。
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告