Elementのel-date-pickerコンポーネントが記入されていない状況を解決します。

1.問題の説明
私たちはElementUIコンポーネントを使ってプロジェクトを完成すると、このような要求に出会うかもしれません。
新しいアクティビティを作成するには、アクティビティの時間範囲を定義する必要があります。
したがって、私たちは新規活動の操作中に、一定期間の区間と活動名などの情報を選択して提出し、新規作成を完了します。
ホームページに新しくできたイベントがあります。他の人が詳しい情報を調べたいです。ページを開けたら、時間帯は書き込みができていません。

2.問題分析
時間情報は記入していません。まずバックグラウンドデータの返却状況とページ上のフィールド情報に差異があるかどうかを確認します。
以上のような状況がなかったら、私がこのような状況に遭遇しました。
バックエンドのデータの戻りには違いがありません。また、ページのフィールドも間違っていません。他の情報も正常に書き換えられます。時間だけは書き返されません。同時に、一回の書き込みの後に記入しないなど多くの場合があります。まとめて言うと、ページとデータは同期されていません。
3.解決策
プリントすると、el-date-picker区間のタイムコンポーネントのデータが実はArayです。

ですから、私たちは普段楽屋からデータを受け取ってから書き込みを行います。

getDetails (obj){
 // form.daterange el-date-picker  v-model   
 this.form.daterange[0] = obj.startTime;
 this.form.daterange[1] = obj.endTime;
}

しかし、ページ上ではよく表示されません。実は私達はこのようにしても大丈夫です。これはelement UI自身のバグです。日付だけでなく、コンポーネントを選ぶ時にはこのような問題があります。時には、コンボボックスもたまにこのような現象がありますが、私達は少し修正すれば大丈夫です。

getData (obj) {
 this.form.daterange = [obj.startTime, obj.endTime]
}

これは一番簡単な実現です。他の方法もいいです。私達の需要を実現できれば、できるだけ他の方法を試してみてもいいです。ここでは一つ一つ挙げません。
補足知識：vueでは、element UIを使用したドロップダウン枠を追加し、クリックイベントの無効な解決策を追加します。

このような方法でイベントを結びつけるのは無効であることが分かります。
正しい方式@click.nativeバインディングクリックイベント

以上のElementのel-date-pickerコンポーネントが記入されていない場合は、小編集が皆さんに共有している内容の全部です。参考にしていただければ幸いです。どうぞよろしくお願いします。