Question

我有一个帐户组件，允许用户点击当前的帐单邮寄地址，并打开一个模式，其中包含更新帐单邮寄地址的表单。帐单地址作为prop传递给子（模态）组件

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

父组件JS

＆＃13;

  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)
    }
  }
};

＆＃13;

Child Component JS

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

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

onClose(){
   this.billingAddress = null
}

vue.js 2.0重置在关闭

1 个答案: