vue 컴포넌트에서 모드가 닫힌 경우 드롭다운 데이터를 리셋하려면 어떻게 해야 합니까?

vue 컴포넌트에서 모드가 닫힌 경우 드롭다운 데이터를 리셋하려면 어떻게 해야 합니까?

이런 나의 경우

부모 컴포넌트와 자녀 컴포넌트의 2가지 컴포넌트가 있다.

부모 컴포넌트는 다음과 같습니다.

<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:{...}하지만 아직 해야 할지 모르겠어

어떻게 하면 이 문제를 해결할 수 있을까요?

리셋을 시도해 보셨습니까?selected데이터 속성mounted라이프 사이클 훅?

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

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

v-modal 구성 요소만 전환하면 모든 것이 재렌더/재계산됩니다.

상위 구성 요소의 상위 구성 요소:

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

언급URL : https://stackoverflow.com/questions/46213029/how-can-i-reset-dropdown-data-if-modal-closed-on-vue-component