我的情况是这样如何在vue组件上关闭模式时重置下拉数据?
我有两个组成部分,父母和孩子组成
我的父组件是这样的:
<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:{...}
。但我仍然很困惑
我该如何解决这个问题?
这是相同的。它不起作用 –
是否触发了“hidden.bs.modal”事件? –
是的。如果我添加'console.log('test')',它会出现如果模态关闭 –