vue数据更新视图不渲染

最新推荐文章于 2024-07-04 10:26:29 发布

原创最新推荐文章于 2024-07-04 10:26:29 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

30 篇文章

订阅专栏

在Vue中遇到一个问题，需要在已有formData数据基础上新增noWritedNum属性并赋值，该值依赖于另一个请求。尝试了三种方法：直接在请求后赋值并使用Vue.set更新视图失败；尝试将noWritedNum存入独立变量并与formData循环同步处理，因异步请求导致数据混乱；最终成功的方法是在formData加载后，通过一个独立的method方法，循环formData.id并使用Vue.set更新属性，从而触发视图渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有这样一串数据（formData）

现在的需求是这串数据已经渲染完毕，但是我要往每列数据里面新增一个noWritedNum属性并赋值，因为这个属性的值在另外一个请求的结果中，这个请求需要formData中的id作为参数。我于是尝试了下面几种方法。

第一种方法（失败）：

在获取formData时拿到id，写个for循环去请求noWritedNum（id），嗯，，，请求成功了，也返回数据了，也赋给formData了，but！！视图没有更新什么鬼，然后使用console.log输出formData发现在我的noWritedNum数据还未返回时视图就已经渲染了。。。。然后我去尝试使用Vue.set更新数据，视图依然未更新。。（还未发现原因，大佬看到麻烦说下嘛）。然后就放弃了这个方法

第二种方法（失败）：

我重新定义一个变量专门保存noWritedNum的结果，这样在把这个结果循环出来不久行了嘛，假装是从formData中循环出来的~~撸起袖子加油干，然后，，，问题来了我发现我formData里面有十行数据，在我使用for循环的时候，因为我是用的axios，就导致了是个noWritedNum一起去请求，但是！！他们处理的时间不同返回结果的顺序完全混乱了，，数据也混乱了对不上号了！这可咋整，然后想到了能不能同步请求，每次返回结果之后再发送下一次请求，然后去搜axios同步，发现axios不支持同步，除非是有ajax。。阿西吧，放弃。

第三种方法（成功）：

车到山前必有路，编程也是一样，这种方法不行我就换一种，总会有可以实现的办法~

在第一种方法的基础上，我想能不能把nowritedNum单独提取出来放到一个method里面，然后在formData执行完毕之后调用在调用它，它自己内部在循环formData.id 然后使用Vue.set更改数据达到重新渲染的结果呢~~ 嗯，，你没猜错，这种方法成功了。说这么多贴下代码吧

获取formData

 initFormList() {
      var _this = this
      this.loading = true
      var data = { name: this.formName, page: this.page, sortName: this.sortName, sortType: this.sortType, type: true }
      initFormList(data).then((data) => {
        _this.formData = []
        _this.formData = data
        for (const i in data) {
          _this.formData[i].passNum = _this.formData[i].writedNum - _this.formData[i].unPassNum - _this.formData[i].unCheckedNum
          _this.formData[i].time = _this.formData[i].time.substr(0, 10) // 将时间格式化
        }
        _this.loading = false
        this.noWritedUsername()
      })
    },

nowritedNum

noWritedUsername() {
      for (const i in this.formData) {
        noWritedUsername(this.formData[i].id, true).then((response) => {
          Vue.set(this.formData[i], 'noWritedNum', response.length) // 重新渲染视图
        })
      }
    },