解决vue视图不渲染

阳光穿透心脏的1/2处 2021-12-05 04:37 340阅读 0赞

动态添加对象属性

//声明
    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()

转载于:https://www.cnblogs.com/YangBinChina/p/11004804.html