Vue 2 の動的コンポーネントは値を失い、無関係な値が変更されると更新されます

Question

私は長い間この問題に悩まされており、バグかと思うところでした。

動的 vue コンポーネントを使用して、テキスト本文のタグを入力に置き換えます。これは期待どおりに機能します:

リーリー

問題は、無関係な値を変更するたびに、dynamic vue コンポーネントが更新され、入力したデータがすべて失われることです。その問題のコピーをここに設定しました: https://codesandbox.io/s/vue-2-playground-forked-pc7q4n?file=/src/App.vue

ご覧のとおり、(period という名前のモデルに割り当てられた) 以下の選択入力の値を変更すると、フォーム内のすべてのデータがクリアされます。

データをコンポーネントにバインドする v-model メソッドも試しました。こちらを参照してください: https://codesandbox.io/s/vue-2-playground-forked-bt766f? file=/ src/App.vue は機能しますが、入力ボックスに文字を入力するたびにフォーカスが失われます

なぜこれが起こるのか、そしてそれを防ぐ方法を誰か教えてもらえますか?

Answer 1

この共有リンクに実際にフォークの変更が加えられたかどうかはわかりませんが、ハイドレート メソッドを計算プロパティに変更したところ、現在は正常に動作しているようです。

https://codesandbox.io/s/pc7q4n

＃＃＃編集＃＃＃

私の変更はなかったと思いますが、とにかく、ハイドレート メソッドを計算されたプロパティにホイストし、

# >Hydrate の

targetObject## の代わりに this.commitmentTarget を使用します。基本的な問題。さらに詳細が必要な場合はお知らせください。