子コンポーネントの v-model をリセットする

Question

親コンポーネントには次のようなものがあります

リーリー

私の子コンポーネントは次のようになります。

リーリー

clearUI が親からトリガーされ、formData がリセットされると、ProductCounter の v モデルは 0 に反映されるはずだと予想していましたが、そうではありません。どこで間違ったのでしょうか?

Answer 1

リアルタイム ソリューションへのリンク

次回は、https://play.vuejs.org/ で最小限の再現可能なサンプルを準備してください。ご質問について:

Vue のリアクティブ変数を上書きしないでください...

変更するだけです Object.assign(formData,initialFormData):

また、コンポーネント プロパティを逆参照しないでください: const value = ref(props.modelValue)。元の値をコピーするだけなので、これらのプロパティは反応性を失います。

#v-model モデルを作成する最良の方法は、テンプレート内で直接操作できる 計算 を使用することです。 リーリー

また、count プロパティは文字列ではなく数値である必要があります (Vue の警告が表示されます):

リーリー

さらに、

で v-model > をすでに使用しているため、input イベントで prop を更新する必要はありません。入力モデルを数値に変換する必要もあります: リーリー

つまり、次のようになります。 アプリケーションビュー

リーリー

ProductCounter.vue:

リーリー