在 vue.js 中的方法中修改數據后手表不工作

Question

這是我的代碼，watch 在 beforeMount 之后工作了一次，但是當我在方法中修改 newDate 時，它不會跟蹤更改。

data() {
    return {
        time: ['12 AM', '1 AM', '2 AM', '3 AM', '4 AM', '5 AM', '6 AM', '7 AM', '8 AM', '9 AM', '10 AM', '11 AM', '12 PM'],
        newDate : '',
        formattedDate: '',
    };
},
watch: {
    newDate(newVal) {
        console.log(1);
        const year = newVal.getFullYear();
        const month = newVal.toLocaleString('default', { month: 'short'});
        const todayDate = String(newVal.getDate()).padStart(2,'0');
        this.formattedDate = `${month  }-${  todayDate  }-${  year}`;
    }
},
beforeMount() {
    this.newDate = new Date();
},
methods: {
    dateChange(action) {
        if(action==='prev') {
            this.newDate.setDate(this.newDate.getDate() -1);
        }
        else {
            this.newDate.setDate(this.newDate.getDate() +1);
        }
    },

Answer 1

由於newDate引用未更改，因此未調用觀察程序。 dateChange dateChange()僅修改相同的newDate 。

一種解決方案是將newDate重新分配給一個新的Date實例，這將導致觀察者運行：

export default {
  methods: {
    dataChange(action) {
      let time = 0;
      if(action==='prev') {
        time = this.newDate.setDate(this.newDate.getDate() - 1);
      }
      else {
        time = this.newDate.setDate(this.newDate.getDate() + 1);
      }
      this.newDate = new Date(time);
    }
  }
}

演示