vueコンポーネントでモーダルが閉じられた場合、どのようにしてドロップダウンデータをリセットできますか？この</p> <p>よう

Question

私の場合、私持って

私の親コンポーネント、このように二つの成分、親と子コンポーネント：

<template> 
    ... 
    <div class="row"> 
     ... 
      <location-select level="continentList" type="1"/> 
     ... 
      <location-select level="countryList" type="2"/> 
     ... 
      <location-select level="cityList" type="3"/> 
     ... 
    </div> 
</template> 
<script> 
    ... 
    export default{ 
     ... 
    } 
</script> 

親コンポーネントは、モーダルブートストラップ

私の子コンポーネントがありますこのように：

<template> 
    <select class="form-control" v-model="selected" @change="changeLocation"> 
     <option value="0" disabled>Select</option> 
     <template v-for="option in options"> 
      <option v-bind:value="option.id" >{{ option.name }}</option> 
     </template> 
    </select> 
</template> 
<script> 
    ... 
    export default{ 
     props: ['level','type'], 
     data() { return { selected: '' };}, 
     computed:{ 
      ...mapGetters([ 
       'getContinentList', 'getCountryList','getCityList' 
      ]), 
      options(){ 
       const n = ['getContinentList', 'getCountryList','getCityList'] 
       return this[n[this.type-1]] 
      } 
     }, 
     methods:{ 
      ...mapActions([ 
       'getLocationList' 
      ]), 
      changeLocation(event){ 
       if(this.type==1){ 
        this.getLocationList([{type:2},{level:'countryList'}]) 
        this.getLocationList([{type:3},{level:'cityList'}]) 
       }else if(this.type==2){ 
        this.getLocationList([{type:3},{level:'cityList'}]) 
       } 
      } 
     }, 
     created() { 
      if(this.type==1) 
       this.getLocationList([{type:1},{level:'continentList'}]) 
      if(this.type==2 && this.selected!='') 
       this.getLocationList([{type:2},{level:'countryList'}]) 
      if(this.type==3 && this.selected!='') 
       this.getLocationList([{type:3},{level:'cityList'}]) 
     }, 
     mounted() { 
      $(this.$parent.$refs.modal).on('hidden.bs.modal', (e) => { 
       Object.assign(this.$data, this.$options.data()) 
      }) 
     }, 
    }; 
</script> 

モーダルショーの場合、私は大陸、国、都市を選択します。その後、私はモーダルを閉じます

その後、再びモーダルを表示します。次に、国と都市を最初に選択します。データはまだ存在します。

データをリセットします。だから私は、私は大陸、国や都市のデータが

を示していない選択する前に、私がしようと、再びモーダル開く場合：

Object.assign(this.$data, this.$options.data()) 

と、この：

Object.assign(this.$data,this.$options.data.call(this)) 

とあまりにもこの：

this.$forceUpdate() 

モーダル隠しの場合

しかし、動作しません

データcomputed:{...}を更新する必要があるようです。しかし、私はまだそれをやって混乱しています

どうすればこの問題を解決できますか？

Answer 1

mountedライフサイクルフックにselectedデータ属性をリセットしようとしましたか？

...  
mounted() { 
    let $vm = this; 

    $(this.$parent.$refs.modal).on('hidden.bs.modal', (e) => { 
     $vm.selected = ''; 
    }); 
}, 
... 

Answer 2

モーダルコンポーネントの場合はv-だけで、トグル時にすべてを再レンダリング/再計算します。親コンポーネントの

親：

<template> 
     <div class="parent-of-parent"> 
      <your-modal-component v-if="isModalOpened" @close="closeModal"></your-modal-component> 
     </div> 
    </template> 


<script> 
    export default{ 
     data() { 
      return { isModalOpened: false }; 
     }, 
     methods: { 
      openModal() { 
       this.isModalOpened = true; 
      }, // method to open it 
      closeModal() { 
       this.isModalOpened = false; 
      }, // method to attach to emit event from modal on close 


     }, 
    }; 

</script> 

あなたが近いか、何のためにクリックしたアイコンにイベントをクリックし添付してください。 このようなイベントを発生させるメソッドにメソッドをアタッチします。

this.$emit('closeModal'); 

あなたは問題モーダル使用をアニメーション<transition>

<transition name="fadeIn"> 
    <your-modal-component v-if="isModalOpened" @close="closeModal"></your-modal-component> 
</transition>