V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
FlowerChen
V2EX  ›  问与答

Vue.js

  •  
  •   FlowerChen · 2017-04-07 16:07:50 +08:00 · 1984 次点击
    这是一个创建于 2788 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue.js 的强大

    10 条回复    2017-04-07 19:43:14 +08:00
    FlowerChen
        1
    FlowerChen  
    OP
       2017-04-07 16:09:34 +08:00
    Vue 项目在 IE11 上遇到诸多问题。
    zhihaofans
        2
    zhihaofans  
       2017-04-07 16:12:23 +08:00 via iPhone
    ???
    airyland
        3
    airyland  
       2017-04-07 16:14:01 +08:00
    你到底想说啥。
    HLT
        4
    HLT  
       2017-04-07 16:15:24 +08:00
    V2 现在 10 个帖了有 8 个是不能看的
    FlowerChen
        5
    FlowerChen  
    OP
       2017-04-07 17:00:45 +08:00
    @airyland 额 vue 的一个项目有很多问题 然后还没想好具体问啥
    exportUrl(index){
    console.log("hhhhh");
    let params={
    'task_id':this.items[index].id
    }
    this.$http.get('/api/v1/export',{
    params:params
    }).then(function(data){
    var a = document.createElement('a');
    var url = window.URL.createObjectURL(data.data);
    a.href = url;
    a.click();
    window.URL.revokeObjectURL(url);
    },function(err){
    if(data.status === 401){
    toastr.error('登录超时')
    this.router.push('/login')
    return false
    }else{
    toastr.error('发现一个小问题:' + status)
    }
    })
    }
    },

    这是一个实现下载附件的方法 在 IE11 上 事件确定被触发啦 但是无法下载
    coo
        6
    coo  
       2017-04-07 17:15:44 +08:00
    @FlowerChen #5 这个问题可能和 Vue 无关,我猜测是创建 a 标签后 click 事件被 IE 拦截,无法下载。
    FlowerChen
        7
    FlowerChen  
    OP
       2017-04-07 17:17:13 +08:00
    @zhihaofans 有问题的 就是问题比较啰嗦不好描述
    这里
    <div class="chart" v-for="(chart,index) in charts">
    <div class="header">
    <div class="title">{{chart.title}}</div>
    <div class="subtitle">{{chart.intro}}</div>
    </div>
    <div class="content">
    <div class="bar" :id="'chart-'+ index"></div>
    </div>
    </div>
    用 v-for 从 API 循环读入数据, <div class="bar" :id="'chart-'+ index"></div>这句渲染 charts.length 个 div ,用 echarts 来绘制图表,因为每个图表的类型( bar 、或者 pie )和数据都不一样(都是循环从 API 读入),实例化图表的时候用了一个 for 循环:
    showChart(){
    for (var i = 0; i < this.charts.length; i++) {
    if ( type===pie )
    {
    var myChart = echarts.init(document.getElementById("chart-" + i));
    .......
    } else if(type === bar)
    {
    var myChart = echarts.init(document.getElementById("chart-" + i));
    }
    .......
    }
    然后发现,图表画不出来,应为在执行图表实例化的时候, DOM 的渲染还没有结束,于是就用了一个定时器,但是遇到数据库比较卡的时候就歇菜啦!有没有好的方法呀,怎样才能确定 v-for 循环渲染已经结束, v-for 中所有的子元素已经渲染完成啦
    FlowerChen
        8
    FlowerChen  
    OP
       2017-04-07 17:31:59 +08:00
    @zhihaofans
    少贴了一段循环渲染 DOM 的方法:
    reloadinfo() {
    let params={
    'task_ids':[this.$route.query.id],
    }
    this.$http.get('/api/v1/get_reports',{
    params:params
    }).then(function(data){
    if(data.data.code == 1000){
    if(data.data.data == 0){
    this.massage = '没有数据'
    }
    this.charts = data.data.data
    }
    },function(err){
    if (data.status === 401) {
    toastr.error('登录超时')
    this.$router.push('/login')
    return false;
    } else {
    toastr.error('发现了一个小问题: ' + status)
    }
    })
    },
    LancerComet
        9
    LancerComet  
       2017-04-07 18:09:02 +08:00   ❤️ 1
    1. 我用 IE 11 执行了这段模拟代码,好像没问题啊,但 IE 11 会让系统打开一个 Blob 而不是 Chrome 中那种直接显示图片.



    2. 请在 Vue 文档中找到 nextTick 这段.
    Francost
        10
    Francost  
       2017-04-07 19:43:14 +08:00
    楼主难道不会 append 吗?自己回复自己的主题,这...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2988 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:51 · PVG 20:51 · LAX 04:51 · JFK 07:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.