想实现的效果

动态渲染的表格，点击“+”上传图片,把临时的图片链接temUrl渲染上去：

问题描述

manageTableData的数据结构：原本没有temUrl键值

一开始我选择用插槽来动态渲染图片的临时链接：

想调用函数把temUrl加进manageTableData去，来实现动态绑定，发现manageTableData确实改变了，然而插槽数据没有及时改变：

addImageFile(image){
  let id=image.data.id//传过来的行信息
  let file=image.file//传过来的文件
  let url=URL.createObjectURL(file)//临时链接
  let fileObj={file}
  let temUrlObj={temUrl:url}
  Object.assign(this.manageTableData.filter(item=>item.number==id)[0],fileObj,temUrlObj)
  console.log(‘this.manageTableData‘,this.manageTableData)
}

so，表格的图片没有及时更新怎么办！？

解决方案

由于找不到动态及时更新插槽数据的方法，于是我更换了策略，决定不用插槽来更新数据，而是新定义一个odd数组来储存临时文件并动态绑定在标签上：

data(){
    return{
        odd:[]
    }
}

//添加临时图片文件
addImageFile(image){
  let id=image.data.id//传过来的行信息
  let file=image.file//传过来的文件
  let url=URL.createObjectURL(file)//临时链接
  
  if(this.odd.filter(item=>item.id==id)[0]){
    //当存在临时文件时，重新赋值
    this.odd.filter(item=>item.id==id)[0].temUrl=url
    this.odd.filter(item=>item.id==id)[0].file=file
  }else{
    //当不存在时，新增一个临时文件对象
    this.$set(
      this.odd,
      this.odd.length,
      {id:id,file:file,temUrl:url}
    )
  }
  console.log(‘this.odd‘,this.odd)
},

总结

这个故事告诉我不要在一条路上死磕

vuejs| table的data更新了，而插槽内的数据不能及时更新