表格插入图片没有及时更新dom问题

Question

element-----------打印的数据

想把每一条数据的specItems的image赋值给specItem，但是现在页面上的dom没有更新，需要再次点击，求详细解释，这里的$set应该怎么写

// 表格插入图片
    createImgsObj() { 
       this.$forceUpdate();
      let imgsObj = {}
      let tableCategoryList = this.tableCategoryList
      
      // 循环规格值的数组
      for (let index = 0; index < tableCategoryList.length; index++) {
        const element = tableCategoryList[index]
        console.log(element,'element-----------');

        if (element.specItems.length > 0) {
          let specItems = element.specItems
          console.log(specItems,'specitems===========')
          for (let i = 0; i < specItems.length; i++) {
           
            const tempArray = specItems[i]
            console.log(tempArray,'jjj')
            console.log(tempArray.specItem,'k==================v')
            // imgsObj[tempArray.specItem] = tempArray.image;
            this.$set(imgsObj,'specItem',tempArray.image) 
            // imgsObj[tempArray.specItem] = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

Answer 1

这是因为异步渲染导致的。
如果前端是用vue的话使用nextTick方法拿到更新后的数据。
注意，Vue2.x和Vue3在nextTick的使用上的区别。
vue2中

API — Vue.js Vue.js - The Progressive JavaScript Framework https://cn.vuejs.org/v2/api/#Vue-nextTick

vue3中 https://v3.cn.vuejs.org/api/global-api.html#nexttick