vue修改对象属性后页面不重新渲染

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jerryyang_2017/article/details/82467016
<el-form-item
          v-for="(repairWorker, index) in ruleForm.repairWorkers"
          :label="'车牌号' + (index+1)"
          :key="repairWorker.id"
          :prop="(repairWorker.name)"
        >
          <el-input style="width:200px; margin-left: -35px" v-model="repairWorker.name"></el-input>
          <el-button @click="addDomain" icon="plus">+</el-button>
          <el-button @click.prevent="removeDomain(repairWorker)" icon="delete">-</el-button>
        </el-form-item>

js部分:

 removeDomain(item) {
        console.log("======="+item);
        var index = this.ruleForm.repairWorkers.indexOf(item)
        if (index !== -1) {
          this.ruleForm.repairWorkers.splice(index, 1);
        }
        
      },

      addDomain() {
        let that = this;
        this.ruleForm.repairWorkers.push({
            name: ''
        });
        
  
      },

然后网上各种百度说用this.$set,所以我就修改成了下面的代码,可是还是不管用

this.$set(this.ruleForm.repairWorkers,this.ruleForm.repairWorkers.length,{name:""})

最后修改成了这样,增加了this.$forceUpdate();这个代码

 removeDomain(item) {
        console.log("======="+item);
        var index = this.ruleForm.repairWorkers.indexOf(item)
        if (index !== -1) {
          this.ruleForm.repairWorkers.splice(index, 1);
        }
        this.$forceUpdate();
        console.log(index);
      },

      addDomain() {
        // let that = this;
        // this.ruleForm.repairWorkers.push({
        //   name: ''
        // });
        this.$forceUpdate();
        this.$set(this.ruleForm.repairWorkers,this.ruleForm.repairWorkers.length,{name:""})
          console.log(this.ruleForm.repairWorkers);
        
  
      },

this.$forceUpdate();可以强制重新渲染页面

展开阅读全文

vue数据的重新渲染

08-19

今天用vue写个分页处理的例子,因为vue数据渲染的问题,搞得我头疼死了,哪位大神可以帮我一下[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif][/img][img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif][/img]rnrn这是我写的部分代码,一会说完问题,在下面附上全部rn[img=https://img-bbs.csdn.net/upload/201808/19/1534667635_310625.png][/img]rnrn我确实每次都能拿到值rn[img=https://img-bbs.csdn.net/upload/201808/19/1534667587_552801.png][/img]rnrn====================rn[color=#FF0000]问题是网上搜也好,官方文档也好,我只能看到他们那些数据的重新渲染、数据的替换都是针对于一个数组里的某一个对象来修改的,而我要做的是将整个数组全部替换掉。rnrn例如rn后台第一次传来的json串是["code":"ARE","name":"United Arab Emirates","code":"ARG","name":"Argentina"],前台把这个json直接给了vue里的data,第二次传来的json串["code":"ASM","name":"American Samoa","code":"ATF","name":"French Southern territories"],将第二次传来的直接给了vue里的data并将覆盖掉第一次的数据,同时渲染视图.......rnrn就这个视图渲染让,我百思不得其解,有哪位大神可以帮我一下..[/color]rnrn============================rn下面是我前端的全部代码rn<%@ page language="java" contentType="text/html; charset=utf-8"rn pageEncoding="utf-8"%>rnrnrnrn rn 世界所有国家列表rn rn rn rn rn rnrnrn 世界所有国家[分页处理]rn 返回目录菜单rn rn 当前第 nowPage 页,共 pageCount 页 / 共 dataCount 条数据,当前显示 nowDataSize 条数据rn rn rn rn 编号rn .........rn 代码rn rn rn rn rn item.codern ........rn item.code2rn rn rn rn rn rn rn rnrn rnrnrnrnrn=========================附上一组从后台传回的数据rn["code":"ARE","name":"United Arab Emirates","continent":"Asia","region":"Middle East","surfaceArea":83600.0,"indepYear":1971,"population":2441000,"lifeExpectancy":74.1,"gPN":37966.0,"gPNOld":36846.0,"localName":"Al-Imarat al-??Arabiya al-Muttahida","governmentForm":"Emirate Federation","hendOfState":"Zayid bin Sultan al-Nahayan","capital":65,"code2":"AE","code":"ARG","name":"Argentina","continent":"South America","region":"South America","surfaceArea":2780400.0,"indepYear":1816,"population":37032000,"lifeExpectancy":75.1,"gPN":340238.0,"gPNOld":323310.0,"localName":"Argentina","governmentForm":"Federal Republic","hendOfState":"Fernando de la R??a","capital":69,"code2":"AR","code":"ARM","name":"Armenia","continent":"Asia","region":"Middle East","surfaceArea":29800.0,"indepYear":1991,"population":3520000,"lifeExpectancy":66.4,"gPN":1813.0,"gPNOld":1627.0,"localName":"Hajastan","governmentForm":"Republic","hendOfState":"Robert Kot??arjan","capital":126,"code2":"AM","code":"ASM","name":"American Samoa","continent":"Oceania","region":"Polynesia","surfaceArea":199.0,"indepYear":0,"population":68000,"lifeExpectancy":75.1,"gPN":334.0,"gPNOld":0.0,"localName":"Amerika Samoa","governmentForm":"US Territory","hendOfState":"George W. Bush","capital":54,"code2":"AS"]rnrn万分感谢[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/3.gif][/img] 论坛

没有更多推荐了,返回首页