如果Vue组件上的模式已关闭,如何重置下拉数据? [英] How can I reset dropdown data if modal closed on vue component?
问题描述
我的情况是这样
我有两个部分,父母和孩子部分
I have two component, parent and child component
我的父组件是这样的:
<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>
如果是模态秀,我选择大洲,国家和城市.然后我关闭模态
If the modal show, I select continent, country and city. Then I close the modal
之后,我再次显示模态.然后我先选择国家和城市,数据仍然存在
After that I show the modal again. Then I select country and city first, the data is still exist
我想重置数据.因此,如果我再次打开模式,那么在选择大洲之前,国家和城市的数据就不会显示
I want to reset the data. So if I open modal again, before I choose continent, country and city data is not showing
我尝试:
Object.assign(this.$data, this.$options.data())
和这个:
Object.assign(this.$data,this.$options.data.call(this))
这也是:
this.$forceUpdate()
当模式隐藏时
但是,它不起作用
似乎它必须更新数据computed:{...}
.但是我还是很困惑
Seems it must update data computed:{...}
. But I'm still confused to do it
我该如何解决这个问题?
How can I solve this problem?
推荐答案
仅v-如果是模态分量,并且在切换时它将重新渲染/重新计算所有内容.
Just v-if the modal component and it will rerender/recalculate everything when toggled.
父级组件的父级:
<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>
请确保将点击事件附加到您单击关闭的图标上. 并为发出此类事件的方法附加一个方法.
Be sure to attach click event on the icon you click for close or whatever. And attach a method to the event which emits like this.
this.$emit('closeModal');
如果您在模态动画方面遇到问题,请使用<transition>
If you have problem animating the modal use <transition>
<transition name="fadeIn">
<your-modal-component v-if="isModalOpened" @close="closeModal"></your-modal-component>
</transition>
这篇关于如果Vue组件上的模式已关闭,如何重置下拉数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!