Vue組件數據和計算的屬性

Question

我遇到以下問題。

我正在聲明數據，我想在之前，當前和之后進行設置。

data () {
  return {
    notes: {
      ...
    },
    view: {
      dayCurrent: new Date(),
      dayBefore: new Date().setDate(this.view.dayCurrent.getDate() - 1),
      dayAfter: new Date().setDate(this.view.dayCurrent.getDate() + 1)
    }
  }
}

但是一旦我保存了這個，我就會得到以下錯誤

data（）中的錯誤：“ TypeError：無法讀取未定義的屬性'dayCurrent'”，好像我的視圖對象不存在。

為什么是這樣？ 我該如何設置並避免這種錯誤。

Answer 1

另一個解決方案是在return語句之外聲明dayCurrent ，並在其他屬性中引用它。

data () {
  const dayCurrent = new Date();
  return {
    notes: {
      ...
    },
    view: {
      dayCurrent: dayCurrent,
      dayBefore: new Date().setDate(dayCurrent.getDate() - 1),
      dayAfter: new Date().setDate(dayCurrent.getDate() + 1)
    }
  }
}

Answer 2

我建議按如下方式在已掛接的鈎子中初始化view屬性：

data() {
    return {
      notes: {
        ...
      },
      view: {
        dayCurrent: '',
        dayBefore: '',
        dayAfter: ''
      }
    }
  },
  mounted() {
    this.view.dayCurrent = new Date();
    this.view.dayBefore = new Date(this.view.dayCurrent.getDate() - 1);

    this.view.dayAfter = new Date(this.view.dayCurrent.getDate() + 1)

  }

 new Vue({ el: '#app', data() { return { notes: { }, view: { dayCurrent: '', dayBefore: '', dayAfter: '' } } }, mounted() { this.view.dayCurrent = new Date(); let d1 = new Date().setDate(this.view.dayCurrent.getDate() - 1); this.view.dayBefore = new Date(d1); let d2 = new Date().setDate(this.view.dayCurrent.getDate() + 1); this.view.dayAfter = new Date(d2) } }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{view.dayBefore}}</p> <p>{{view.dayCurrent}}</p> <p>{{view.dayAfter}}</p> </div>