vue中，從列表中選擇一條數(shù)據(jù)，進(jìn)行彈窗修改，如何實(shí)現(xiàn)最優(yōu)雅？

題目描述

列表中的數(shù)據(jù)，選中一條，點(diǎn)擊修改，彈窗顯示詳情，可以進(jìn)行修改，點(diǎn)擊確定往后臺(tái)傳數(shù)據(jù)，點(diǎn)擊取消關(guān)閉彈窗

有個(gè)特殊點(diǎn)就是 后臺(tái)傳過(guò)來(lái)的 date字段是 time類(lèi)型，需要轉(zhuǎn)成date，el-date-picker才支持

題目來(lái)源及自己的思路

效果圖:

我的思路就是

computed一個(gè)currentData return list[0],
然后將 currentData傳入彈窗組件，還傳入一個(gè)是否顯示彈窗變量visible，
彈窗組件內(nèi)部
watch visible，如果visible是true就 深拷貝一個(gè)currentData，

這樣彈窗內(nèi)部無(wú)論如何修改數(shù)據(jù)都不會(huì)影響 父組件的currentData,

然后已一個(gè) 時(shí)間字段的修改 來(lái)當(dāng)例子 ，我覺(jué)得我的代碼寫(xiě)的很丑 ，不夠優(yōu)雅 ，請(qǐng)各位指點(diǎn)一下 ，謝謝

相關(guān)代碼

父組件：

<modify-dialog v-if="checkedBettingObject" :betting-object="checkedBettingObject" :highlight-id.sync="highlightId"
               :visible.sync="modifyDialogVisible"></modify-dialog>
               

子組件:

html:

最早時(shí)間：<el-date-picker v-model="dateProp" type="datetime"></el-date-picker>

js:

props: ['visible', 'bettingObject', 'highlightId'],
created() {
  //創(chuàng)建時(shí)給子組件的currentData賦值
  this.bettingObjectProp = Object.assign({}, this.bettingObject)
  //給子組件綁定的currentData的時(shí)間字段賦值
  this.dateProp = new Date(this.bettingObjectProp.earliestMatchTime)
},
data() {
  return {
    //子組件的currentData
    bettingObjectProp: null,
    //子組件的 時(shí)間選擇框綁定的值 
    dateProp: null
  }
},
watch: {
  //監(jiān)控，每次點(diǎn)擊按鈕visible都會(huì)為true，都將currentData深拷貝一次
  visible() {
    if (this.visible) {
      this.bettingObjectProp = Object.assign({}, this.bettingObject)
      this.dateProp = new Date(this.bettingObjectProp.earliestMatchTime)
    }
  },
  //時(shí)間控件每次變化都改變 子組件currentData的值
  dateProp() {
    this.bettingObjectProp.earliestMatchTime = this.dateProp
  }
},

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

問(wèn)題描述

我覺(jué)得我現(xiàn)在代碼寫(xiě)的很麻煩，很啰嗦，不優(yōu)雅，但是又找不到好的解決辦法，請(qǐng)各位賜教，謝謝