値/入力ライフサイクルの問題

Question

私には奇妙なシナリオがあります。私はstart_dateのためのものとend_dateのものの2つの日付ピッカーを持っています。 start_dateが変更され、日付がisAfter、end_dateの場合、start_dateはend_dateになります。ただし、最初の変更はうまくいきますが、（end_dateの後の）変更は実行されず、その後の変更には元の日付が表示されます。

ヴュ：

<date-picker :value="start_date" @input="changeStartDate" /> 
<date-picker :value="end_date" @input="changeEndDate" /> 

スクリプト：だから私は、3月17、2017年3月10日、2017年の範囲を持っていると私はstart_date 3月24日、2017年を変更した場合

... 
data() { 
    return { 
     start_date: moment().format('YYYY-MM-DD'), 
     end_date: moment().add(7, 'days').format('YYYY-MM-DD') 
    }; 
}, 
methods: { 
    changeStartDate(value) { 
     console.log('value', value); 

     let start_date = moment(value, 'YYYY-MM-DD'); 
     let end_date = moment(this.end_date, 'YYYY-MM-DD'); 

     if (start_date.isAfter(end_date)) { start_date = end_date.clone(); } 

     this.start_date = start_date; 
    }, 
    changeEndDate(value) { 
     // Similar code as above 
    } 
} 
... 

、これが初めて発生すると、予想通りに日付が2017年3月17日に切り替わります。しかし、最初に火をつけた後、再度2017年3月24日に変更すると、start_dateは2017年3月24日に変更され、isAfterルールを守らない。

ここで何が起こっている可能性がありますか？

UPDATE

デバッグのビットを行った後、私は何が起こっているかに気づきます。

1. コードが値を変更し、UIを更新しEND_DATEにSTART_DATEを変更した場合、日付は3月24、2017
2. 3月10日、2017年から日付が変わるので、細かい初めての作品。
3. 2回目の起動時に視覚的に変更され、値が変更されますが、イベントが再び発生した場合、以前と同じ日付になります.Vuejsはそれを変更していないと見なして更新しませんそれ。
4. end_dateより前の値に変更すると、再び動作します。

だから多分質問は、私はそれが同じデータをだか、いない場合、データの変更にかかわらず、イベントを毎回起動するようにVueJSを得るのですかですか？

Answer 1

あなたが戻っstart_dateの変数に瞬間オブジェクトを割り当てているが、その代わりに、それはこのように、バック文字列にフォーマットされた瞬間である必要があります。if文が真であるとき

this.start_date = start_date.format('YYYY-MM-DD'); 

ので、END_DATEがクローン化されましたモーメントオブジェクトはまだ文字列に変換されます。