vue.js 2.0 모달 컴포넌트에 근접하여 소품 리셋

vue.js 2.0 모달 컴포넌트에 근접하여 소품 리셋

사용자가 현재 청구처 주소를 클릭할 수 있는 계정 컴포넌트가 있으며 청구처 주소를 갱신하는 폼과 함께 모달(modal)이 열립니다.청구 주소는 이와 같이 자(모달) 컴포넌트에 소품으로 전달됩니다.

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

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

호출 시 모든 것을 null로 설정하는 onClose라는 변환이 있을 수 있습니다.

onClose(){
   this.billingAddress = null
}

언급URL : https://stackoverflow.com/questions/49481905/vue-js-2-0-reset-props-passed-to-modal-component-on-close