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

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

img


想把每一条数据的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'

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


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

试试给表格加个key 让key等于一个随机数,每次设置specItem都重新给key赋值

哈喽,给你要渲染的图片加个时间戳,有用请点采纳哦~

src=`${image}?${new date().getTime()}`

imgsObj在data中声明
this.$set(this.imgsObj, 'specItem', tempArray.image)