題目描述

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

有個特殊點就是 后臺傳過來的 date字段是 time類型，需要轉成date，el-date-picker才支持

題目來源及自己的思路

效果圖:

我的思路就是

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

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

然后已一個 時間字段的修改 來當例子 ，我覺得我的代碼寫的很丑 ，不夠優(yōu)雅 ，請各位指點一下 ，謝謝

相關代碼

父組件：

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

子組件:

html:

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

js:

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

你期待的結果是什么？實際看到的錯誤信息又是什么？

問題描述

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