我有一个用例,我可能需要将一个对象props作为道具传递给子组件.

最初,我有一个组件中包含的表单和表.该表单将接受输入,将执行异步请求,并且将呈现该表以供用户进行选择.然后,用户可以点击按钮并隐藏表格并重新启动表格,以便重新输入参数.由于表单的内容取决于其父级的状态,因此最后的搜索参数仍然在表单中.

当我重构组件以同时创建父组件的表单子组件和表子组件时,就出现了这个问题.现在,表单将$emit事件发送到其父级,它将执行异步操作并将结果传递props给表.这工作正常,但是当用户点击"返回到表单"按钮时,表单将被重新呈现,从而将其状态重置为初始值.

我尝试将表单的内容存储在父表单中并将其传递回表单,props但这导致了初始设置值的问题.我不想直接改变道具,所以我尝试了这种方法:

FormContainer.vue

<template>
  <div v-if="formShown">
    <form-component :initialValues="formValues" @formSubmitted="displayResults"></form-component>
  </div>
  <div v-if="tableShown">
    <table-component :results="fetchedResults" @returnToForm="returnToForm"></table-component>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        formShown: true,
        tableShown: false,
        formValues:{
          address1: '',
          address2: '',
          address3: '',
          country: ''
        },
        fetchedResults: []
      }
    },
    methods:{
     async displayResults(){
        this.fetchedResults = await someAsynchronousCall();
        this.formShown = false;
        this.tableShown = true;
     },
     returnToForm(){
       this.tableShown = false;
       this.formShown = true;
     }
    }
  }
</script>

FormComponent.vue

<template>
  <!--Some form …

我在使用Vuetify构建的Vue表单上测试Vee-Validate确认函数时遇到了一些困难.我尝试测试的组件如下所示:

<template>
    <form novalidate ref="loginForm" v-model="formValid" @submit.stop.prevent="formSubmitted" @keyup.enter="formSubmitted">
      <v-container grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-text-field
              name="passwordField"
              label="Enter your Password"
              hint="At least 6 characters"
              v-model="submissionDetails.password"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|min:6'"
              data-vv-name="password"
              :error-messages="errors.collect('password')"
              ref="password"
              @change="inputTriggered"
              @input="inputTriggered"
            />
          </v-flex>
          <v-flex v-show="createAccountTicked">
            <v-text-field
              name="confirmPasswordField"
              label="Confirm your Password"
              hint="At least 6 characters"
              v-model="confirmPassword"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|confirmed:$password'"
              data-vv-name="confirmPassword"
              :error-messages="errors.collect('confirmPassword')"/>
          </v-flex>
        </v-layout>
      </v-container>
    </form>
  </template> …