質問
最近プロジェクトに取り組んでいるとき、通常、ダイアログ コンポーネントのコールバック close に resetFields を追加して、初期値をリセットし、チェックします。
他の場所には問題ありません テーブル コンポーネントに問題があります その後、vue ツールを監視し、resetFields を表示したところ、formData は変更されておらず、最終的に理由が見つかりました。
解決
1. ダイアログでデータの[追加]、[変更]を行う
2. [変更]をクリックすると、ポップアップウィンドウがポップアップする この時点で、ポップアップウィンドウのフォームに値が割り当てられている.
3. [追加] ボタンをクリックし、resetFields() メソッドを呼び出します フォームをクリアする方法はありません
直接書くだけならthis.$refs.formRef.resetFields()
編集操作にはデータエコーがあるため、マウントされたステージでデータエコーがレンダリングされ、
そして、resetFieldsはフォームフォームを初期値にリセットするもので、この初期値はフォームフォームがマウントされた後の値です
その結果、検証はクリアすることしかできず、フォームを必要な初期値にリセットすることはできません
そう直接this.$data.roleFrom=JSON.parse(JSON.stringify(this.$options.data().roleFrom))
ディープ コピー ロールForm はい! 完了
拡張
他のページで問題ないのはなぜ? 他のコンポーネントのダイアログのデータエコーが問題ない理由を後で調べに行ったのは、watch を使用して他のコンポーネントの id の変更に応じてレンダリングを実行し、そのたびにダイアログを閉じるコールバックでは、ID を空の文字列に積極的にクリアします。インターフェイス ID が空の文字列の場合、リクエストも送信され、取得されたデータはエコーされた値に対応しないため、空になります。本質的に、要求は再送信されますが、これはまさにデータが表示に対応していないためであり、追加操作中にデータが空であるという正しい外観を引き起こします。
全体的にまだ厳密ではないので、ここでコードを修正したいのですが、ここにifを追加すると、閉じるたびにリセットされますが、開くときにリセットする必要はありません。
① サブコンポーネント ウォッチ if newVal===" " 上記のフォームのリセット メソッド (ここでは、空の文字列が明確にわかるように意図的にスペースを追加しました。実際のリセットではスペースを追加する必要はありません)
② 親コンポーネントのダイアログクローズコールバックに isEdit=false を追加し、子コンポーネントのwatch idが空文字に変化した際にajaxを繰り返し送信しないようにする
補足を加える
もう1つのポイントは、毎回ajaxを使ってデータを取得すると、新しいアドレスオブジェクトも取得されます.これは、私のデータの一部がローカルに既に存在する参照データを使用しているためです.これは、誰もが参照を使用するためです.関連性を見つけてビジネスに影響を与える場合は、その詳細なコピーを作成します。