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() 对象数据的主要内容,如果未能解决你的问题,请参考以下文章

vue 重置组件的值

vue 强制刷新子组件

Reactive Form valueChanges observable 重置表单值

如果模式在 vue 组件上关闭,如何重置下拉数据?

vue 组件库 ant-design、quasar、element-ui 按需加载和主题重置

vue3懒加载重置