解决vue视图不渲染

 动态添加对象属性

//声明
var travelMainVueObj;
travelMainVueObj = new Vue({ "el" : "#portletContent", "data" : { checkBudgetData: {}//预算检查 } });

//使用 js部分
                            var checkBudgetText = "";
                            var checkBudgetFlag = "1"; //1代表 预算执行控制检查通过; 2代表违反柔性;
                            var checkBudgetObject = {};
                            if(noPassSize == 0 ){
                                //预算执行控制检查通过
                                checkBudgetText  = "预算执行控制检查通过";
                                checkBudgetFlag = "1";
                            }else{
                                //有N条违反柔性,待查看
                                checkBudgetText = "有 "+ noPassSize +" 个违反柔性 待查看";
                                checkBudgetFlag = "2";
                            }
                            
                            Vue.set(travelMainVueObj.checkBudgetData,"checkBudgetResult",checkBudgetText);
                            Vue.set(travelMainVueObj.checkBudgetData,"checkBudgetFlag",checkBudgetFlag);



//使用 html部分
                                <div class="rowContent">
                                    <span class="pass" id="checkBudgetResultPass" v-if="checkBudgetData.checkBudgetFlag == '1'">
                                        {{checkBudgetData.checkBudgetResult}}
                                    </span>
                                    <span class="reject" id="checkBudgetResultReject" v-else-if="checkBudgetData.checkBudgetFlag == '2'">
                                        {{checkBudgetData.checkBudgetResult}}
                                    </span>
                                </div>
语法:
Vue.set(更新vue的对象或者数组,"key的名字",key的值);
Vue.set()在methods中也可以写成this.$set()

posted @ 2019-06-11 17:17  杨斌_济南  阅读(2759)  评论(0编辑  收藏  举报