ビジネスシーン:
[追加] ボタンをクリックして、フォームの入力を入力します。ポップアップ ボックスを再度開くと、ポップアップ ボックスの内容をリセットする必要があります。
または、リセット ボタン機能を実装する場合、一部のデータを空白にする必要があります。
Vue2の書き方
これは、vue2 の組み込みメソッドを通じて実装されます。
//this.$data 現在の状態のデータを取得します
//this.$options.data() コンポーネントの初期状態のデータを取得する
Object.assign(this.$data, this.$options.data())
Vue3の書き方
//定义一个函数把需要的值return出来
const dataDefault = () => {
return {
formData: {
data: ''
},
searchData: {
data: ''
}
}
}
//把返回值进行reactive,然后得到数据
const state = reactive(dataDefault())
//重置按钮
const resetClick = () => {
// state.formData 当前值 dataDefault().formData 页面初始进入时设置的值
// 该步操作把初始值重新赋值给当前值,达到重置对象值的目的。
Object.assign(state.formData, dataDefault().formData);
}