2

我有一个帐户组件，它允许用户单击当前的帐单地址，并打开一个带有表单以更新其帐单地址的模式。帐单地址作为道具传递给子（模态）组件

<sweet-modal ref="billingAddressModal" v-on:close="test">
  <BillingAddressForm :billingAddress="currentCustomer">       </BillingAddressForm>
 </sweet-modal>

如果用户编辑了任何字段但随后决定关闭模式然后重新打开它，则编辑将被保留。将其重置为原始值的正确方法是什么，因为我只想在他们提交表单时更新地址？

<form v-on:submit.prevent class="billingAddressForm">
  <div class="grid__item text-left">
    <label>Name</label>
  </div>
  <div class="grid__item large-up--one-half">
    <input type="text" id="first_name" name="firstname" placeholder="First Name" v-model="cachedUser.first_name" />
  </div>
  ... ...
</form>

父组件 JS

  import {
    mapState,
    mapGetters
  } from 'vuex'
import {
  SweetModal
} from 'sweet-modal-vue'
import CardForm from './CardForm'
import BillingAddressForm from './BillingAddressForm'

export default {
  components: {
    SweetModal,
    CardForm,
    BillingAddressForm
  },
  data() {
    return {
      title: 'order history'
    };
  },
  computed: {
    ...mapGetters([
      'currentCustomer'
    ])
  },
  methods: {
    openCardUpdateModal() {
      this.$refs.cardModal.open()
    },
    openBillingAddressModal() {
      this.$refs.billingAddressModal.open()
    },
    test() {
      alert(this.currentCustomer = null)
    }
  }
};

子组件 JS

export default {
  name: 'BillingAddressForm',
  props: {
    billingAddress: {
      type: Object,
      required: true,
    }
  },
};

4

1 回答 1

1 

<sweet-modal ref="billingAddressModal" v-on:close="onClose">
  <BillingAddressForm :billingAddress="currentCustomer">       </BillingAddressForm>
 </sweet-modal>

您可以有一个名为 onClose 的突变，它在调用时将所有内容设置为 null。

onClose(){
   this.billingAddress = null
}
于 2018-03-25T23:10:22.140 回答