Ant Design vueモードボックスformフォームの初期値は動的に更新できません
1934 ワード
Ant Design vueフレームワークで問題が発生しました.編集機能を実装するときは、モダリティボックスmodalを呼び出し、modalのmethods定義editメソッドを呼び出し、initialValueでフォームの初期値を入力します.ただし、編集modalを最初に開くと、初期値は正常に付与され、modalウィンドウを再度開くと、フォームに表示される値は最初に開いた初期値です.
コードは大体こうです.
dataはtitleパラメータを定義してデータを動的にバインドする:
これは、modalを初めて開くとFormにはinitialValueが与えられますが、この値はコンポーネントがマウントされているときに1回しか実行されず、後で実行されず、データが再更新されないためです.
ネットで調べた方法:
modalモードボックスは表示の有無を制御するためにVisibleを適用し、この値の変化を利用すればmodalモードボックスの再マウントを実現することができます.
しかし、この文法はどういう意味ですか.読めませんでしたか.知っている子供靴があったら教えてください.
解決方法:
(1)initialValueパラメータを削除
(2)editメソッドをsetFieldsValueに変更して初期値を設定する.
コードは大体こうです.
dataはtitleパラメータを定義してデータを動的にバインドする:
data () {
return {
title: ''
}
},
methods () {
// record list
edit (record) {
this.title = record.title
}
}
これは、modalを初めて開くとFormにはinitialValueが与えられますが、この値はコンポーネントがマウントされているときに1回しか実行されず、後で実行されず、データが再更新されないためです.
ネットで調べた方法:
modalモードボックスは表示の有無を制御するためにVisibleを適用し、この値の変化を利用すればmodalモードボックスの再マウントを実現することができます.
{
Visible &&
}
しかし、この文法はどういう意味ですか.読めませんでしたか.知っている子供靴があったら教えてください.
解決方法:
(1)initialValueパラメータを削除
(2)editメソッドをsetFieldsValueに変更して初期値を設定する.
import pick from 'lodash.pick'
data () {
return {
model: {}
}
},
methods () {
// record list
edit (record) {
//
this.form.resetFields()
this model = Object.assign({}, record)
this.$nextTick(() => {
//
this.form.setFieldsValue(pick(this.model, ['title']))
})
}
}