Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.4k views
in Technique[技术] by (71.8m points)

vue,table的data更新了,而插槽内的数据如何及时更新

image.png

我这里动态渲染的表格,点击“+”上传图片之后想把临时的图片链接temUrl渲染上去:
[569U~MM6Z`@9F$~{L4(~PM.png

这个manageTableData的原本没有temUrl对象,现在我调用函数把这个对象加进去:
image
完了之后表格的图片没有及时更新,咋整?

(但打开控制台后就更新了,就是更新太慢了,怎么办?)
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

解决了。我更换了策略,决定不用插槽来更新数据,而是新定义一个odd数组来动态绑定。

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

image.png

//添加临时图片文件
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)
},

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...