Vue 3 组件重置不会重置 reactive() 对象数据
Posted
技术标签:
【中文标题】Vue 3 组件重置不会重置 reactive() 对象数据【英文标题】:Vue 3 component reset does not reset reactive() object data 【发布时间】:2021-09-13 02:28:56 【问题描述】:使用 Vue 3、打字稿、组合 API 和 FireStore 数据,当尝试通过键值更改重置表单时,所有reactive()
数据都会重置为其原始存储值除了嵌套对象数据。 ..在这种情况下address:
。
家长
<template>
...
<component :key="formKey" @reset="formReset" :FireStoreData="fsData" />
...
</template>
<script lang="ts">
...
export default defineComponent(
...
setup()
const formKey = ref(0)
const formReset = () => formKey.value++
return activeForm, formKey, formReset
)
</script>
子表单
<template>
<form>
<input type="text" v-model="name" /> // RESETS
<input type="text" v-model="address.street" /> // DOES NOT RESET
<input type="text" v-model="address.city" /> // DOES NOT RESET
<input type="text" v-model="phone" /> // RESETS
<button @click.prevent="reset">Reset</button>
</form>
</template>
<script lang="ts">
...
export default defineComponent(
...
setup(props, emit)
const formData = reactive(
name: '',
address:
street: '',
city: ''
,
phone: ''
)
Object.assign(formData, props.FireStoreData)
const reset = () => emit('reset')
return ...toRefs(formData), reset
)
</script>
【问题讨论】:
简单复制你这里的东西似乎对我很有效 【参考方案1】:要获得发出你需要做的事情
setup(props, emit )
最小复制
父.vue
<template>
<div class="">formKey</div>
<Child
:key="formKey"
@reset="formReset"
/>
</template>
<script lang="ts">
import ref, defineComponent from "vue";
import Child from "./Child.vue";
export default defineComponent(
components:
Child,
,
setup()
const formKey = ref(0);
const formReset = () => formKey.value++;
return formKey, formReset ;
,
);
</script>
Child.vue
<template>
<form>
<input type="text" v-model="name" />
<input type="text" v-model="address.street" />
<input type="text" v-model="address.city" />
<input type="text" v-model="phone" />
<div>Name name </div>
<div>Street address.street </div>
<div>City address.city </div>
<div>Phone phone </div>
<button @click.prevent="reset">Reset</button>
</form>
</template>
<script lang="ts">
import defineComponent, toRefs, reactive from "vue";
export default defineComponent(
setup(props, emit )
const formData = reactive(
name: "",
address:
street: "",
city: "",
,
phone: "",
);
const reset = () => emit("reset");
return ...toRefs(formData), reset ;
,
);
</script>
重置
【讨论】:
正在使用发射。抱歉,我的复制品中省略了它。如请求中所述,大部分数据都会重置,嵌套对象除外。以上是关于Vue 3 组件重置不会重置 reactive() 对象数据的主要内容,如果未能解决你的问题,请参考以下文章
Reactive Form valueChanges observable 重置表单值