问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用vue做点击事件的数据绑定切换，echarts折线图展示数据的切换（不同城市数据展示的切换）

头像
三刀流海贼王
    239

    图片描述

    我想通过对象名来获取下面的数据，然后点击后切换过来。图片描述

    这个是赋值部分代码!
    图片描述

    结果就是报错了，控制台说无法获取到这个数据，是未定义。
    补充：图片描述

    我那数组对象里面不是还剩两组数据吗，就是用来给这个折线图用的，这个折线图是用echarts配置的。下图为配置部分代码!
    图片描述
    这个部分我还没做，也没有什么好的思路，大佬可以随便也讲下这里吗？如何将echarts里面的数据也实现切换？

    vue.jsecharts
    阅读 7.5k
    1 个回答
    得票最新
    头像
    Reachel
      2.6k
      ✓ 已被采纳

      你在choice方法里面传的第二个参数是字符串，然后你在方法里面是通过this.ratio去获取，肯定获取不到。
      先讲讲为什么，this指向vue实例，this.ratio表示获取vue实例的ratio变量，再看看data里面并没有定义radio变量，所以获取不到。
      怎么获取？想原封不动的获取vue实例传参里面的变量，要这样写this[ratio]
      给你一个参考

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
     <button id="hangzhou" @click="choice('hangzhou')">杭州</button>
     <button id="jiaxing" @click="choice('jiaxing')">嘉兴</button>
  </div>
    
<script>
    var app = new Vue({
    el: '#app',
    data: {
         hangzhou:{
              "displaySuccess":{
                    "weekAgo":123
              }
         },
         jiaxing:{
              "displaySuccess":{
                    "weekAgo":234
              }
         }
    },
    methods:{
          choice:function(city){
                console.log(this[city])
                console.log(this[city].displaySuccess)
                console.log(this[city].displaySuccess.weekAgo)
          }
    }
});
</script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题