Vue 3 组件重置不会重置reactive() 对象数据 [英] Vue 3 component reset does not reset reactive() object data

问题描述

使用 Vue 3、打字稿、组合 API &FireStore 数据，当尝试通过键值更改重置表单时，所有 reactive() 数据将重置为其原始存储值除了嵌套对象数据...在这种情况下地址:{}.

Using Vue 3, typescript, composition API & FireStore data, when attempting to reset the form by key value change, all reactive() data resets to its original stored value except the nested object data... in this case 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>

推荐答案

要获得发射权限，您需要做的事情

to get access to emit you need to do

setup(props, { emit }) {

最小复制

Parent.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() 对象数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！