vue |table的data更新了，但插槽的數據不能及時更新

想實現的效果

動態渲染的表格，點擊“+”上傳圖片,把臨時的圖片鏈接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)
},

總結

這個故事告訴我不要在一條路上死磕