如果模式在 vue 组件上关闭，如何重置下拉数据？

Posted 2023-02-23

【中文标题】如果模式在 vue 组件上关闭，如何重置下拉数据？

【英文标题】：How can I reset dropdown data if modal closed on vue component?

【发布时间】：2018-02-23 01:54:16

【问题描述】：

我的情况是这样的

我有两个组件，父组件和子组件

我的父组件是这样的：

<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:...。但我仍然很困惑这样做

我该如何解决这个问题？

【参考方案1】：

您是否尝试过重置 mounted 生命周期挂钩中的 selected 数据属性？

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

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

【讨论】：

事件hidden.bs.modal是否触发了？

是的。如果我添加console.log('test')，如果模态关闭就会出现

你有 Vue 开发工具吗？你能检查一下data.selected 是否被重置了吗？

【参考方案2】：

只需 v-if 模态组件，它会在切换时重新渲染/重新计算所有内容。

父组件的父组件：

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