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

【问题标题】：How can I reset dropdown data if modal closed on vue component?如果模式在 vue 组件上关闭，如何重置下拉数据？
【发布时间】：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:{...}。但我仍然很困惑这样做

我该如何解决这个问题？

【问题讨论】：

标签： vue.js vuejs2 bootstrap-modal vue-component vuex

【解决方案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>

【讨论】：