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

想实现的效果

动态渲染的表格,点击“+”上传图片,把临时的图片链接temUrl渲染上去:
vuejs| table的data更新了,而插槽内的数据不能及时更新

问题描述

manageTableData的数据结构:原本没有temUrl键值
vuejs| table的data更新了,而插槽内的数据不能及时更新

一开始我选择用插槽来动态渲染图片的临时链接:
vuejs| table的data更新了,而插槽内的数据不能及时更新

想调用函数把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更新了,而插槽内的数据不能及时更新

总结

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

上一篇:LeetCode 第 31 场双周赛


下一篇:4.3、匿名函数