vue.js渲染问题

问题描述

问 题

vue.js渲染问题。不知道你们有没有遇到过，偶尔会出现数据没渲染出来，必须刷新才能渲染出来，这样的问题怎么解决？
已经ajax异步了，也用了vue的生命周期函数，但是还是有这种问题。
bootstrap 模态弹窗show的时候调用newlotteryItem并传入dom节点跟当前窗口。

var newlotteryItem = function(localecontent,dialog){
    var vm = new Vue({
        el: localecontent,
        data:{   
            showerror:false,//pass validat or not
            pagetitle:'新建现场抽奖',//page title
            prizedata:'',//prize list data
            generatingMode:[
                '逐一产生','一次产生'
            ],//generation mode
            prizetheme:'',//lotter theme
            prizeinstro:'',//lotter instruction
            prizeList:[//main structure,prize item
                {   
                    awardsName:'',
                    prizeId:'--请选择奖品名称--',
                    prizeMan:'',
                    generatingMode:'逐一产生'
                }
            ]
        },
        ready:function(){
            var thisContruct = this;
            $.ajax({
                type:"post",
                url:contextPath + "/WxPrize/pageJson.koala?pagesize=1000&page=0",
                async : true,
                success:function(result){
                    thisContruct.$data.prizedata = result.data;
                }
            })
        },
        method:function(){}
    })   
}    

解决方案

我遇到的问题是因为命名冲突，这个项目大范围使用了bootstrap的模态组件，我直接用的modal-content类作为el，所以再次有模态组件调用的时候就会出现冲突。
其实是个很基础的问题，只是没注意忽略了，问题一直存在了半个月，我很羞愧。
各位回答的都很好，虽然并没有解决我的问题，但是总结了很多vue的基础，对于我使用vue跟前端开发都有非常大的帮助，可以说是获益良多，感谢至极，我将总结合并一下。
1.使用框架，就用框架的规则，使用生命周期函数来做数据的更改，处理函数写在method里面使用vm.函数调用。
2.ajax是异步的，不到万不得已不要使用同步，因为同步真的很阻塞，亲身体会。比如有5个回填数据的输入框，第二个输入框使用同步，那么第二个没完成之前下面输入框的全是空的，这样是不是很影响体验？
3.ajax方式get有缓存，post没有，注意使用方式。

感谢三位大神的帮助 @leftstick @GoldyMark @林岑影

这篇关于vue.js渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！