关于vue.js:vue数据层次嵌套太深导致视图不跟新问题vfor循环的数组

59次阅读

共计 584 个字符,预计需要花费 2 分钟才能阅读完成。

问题:
在我的项目中这个数据是这样嵌套的

      json: {
        type: ' ',
        agentList: [
          {
          name: '',
            id: ''
           },
        ]
      },

须要 json.agentList 进行数据循环,点击删除的时候就删除其中一个数据

          <div class="form-item validate dis-flex flex-center" v-for="item in json.agentList" :key='item.id'>
            <label class="label validate">{{item.type==1 ?'委托代理人:' :'法定 / 指定代理人:'}}</label>>
          </div>

操作删除应用了 splice 删除 json.agentList 中一条数据,数据删除了,然而视图就是不更新

let index = this.json.agentList.findIndex(el => {return el.name == item.name})
        this.json.agentList.splice(index, 1)

解决
增加一句 this.$forceUpdate() 解决了刷新问题

let index = this.json.agentList.findIndex(el => {return el.name == item.name})
        this.json.agentList.splice(index, 1)

      this.$forceUpdate()

正文完
 0