1. Home
  2. Forum
  3. Vue
  4. Can't reset values in Dialog

Can't reset values in Dialog

Hi,

I have an issue with the dialog component that occurs when I open it after closing it for the first time and when i set some values.

Can you tell me how I can reset the dropdownlist value in my sample, after I choose it for the first time.

As you can see, in my sample, I have reseted the value that i use in v-model, but it didn't change the selected value in the dropdown.

This is my component: 

<template>
    <div class="row">
        <div id="modalTargetNepokretnosti">
            <ejs-button type='button' cssClass="e-outline pull-right m-t-25" id='modalbtnNepokretnosti' iconCss='e-icons e-home-icon' iconPosition='right' v-on:click.native="modalBtnNepokretnostiClick">{{$t('Nepokretnost')}}</ejs-button>
            <ejs-dialog ref="modalDialogNepokretnosti" :isModal='isModal' :header='headerNepokretnosti' :target='targetNepokretnosti' :width='width' :height="height" :animationSettings='animationSettings' :content='contentNepokretnostiTemplateVue' :open="modalDlgNepokretnostiOpen" :showCloseIcon='showCloseIcon' :close="modalDlgNepokretnostiClose" :overlayClick="overlayNepokretnostiClick" :visible="false" :footerTemplate='footerNepokretnostiTemplate'>
            </ejs-dialog>
        </div>
    </div>

</template>
<script>
    import Vue from 'vue';
    import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
    import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
    import contentNepoTemplateVue from "./template.vue";
    Vue.use(DialogPlugin);
    Vue.use(ButtonPlugin);

    var footerNepokretnostiTemplateVue = Vue.component("demo", {
        template: '<div class="row"> <div class="col-md-9"></div><div class="col-md-3"><button type="button" id="sendButton" class="btn-block e-control e-btn e-primary sendButton" @click="sacuvajVezu">Sacuvaj</button></div></div>',
        data() {
            return {
                data: {}
            };
        },
        methods: {
            sacuvajVezu: function () {
                bus.$emit('ModalDodajNepokretnostSubmit', null);
            },
        }
    });

    export default {
        name: 'ContractGeneral',
        components: {
        },
        data: function () {
            return {
                footerNepokretnostiTemplate: function () {
                    return { template: footerNepokretnostiTemplateVue }
                },
                showCloseIcon: true,
                targetNepokretnosti: "#modalTargetNepokretnosti",
                width: '90%',
                height: '750px',
                headerNepokretnosti: 'Dodaj nepokretnost',
                contentNepokretnostiTemplateVue: function () {
                    return { template: contentNepoTemplateVue }
                },
                isModal: true,
                animationSettings: { effect: 'Zoom' },
                showCloseIcon: true,
                data: {
                },
                locale: this.$store.state.app.scLang,
            }
        },
        created() {
        },
        mounted() {
            var zapamti_this = this;
            bus.$on('DodajNepokretnost', (item) => {
                //console.log(item);
                zapamti_this.data.NEPOKRETNOSTI.push(item);
                //console.log(zapamti_this.data.VEZA_PREDMETA);
                document.getElementById('grid_NEPOKRETNOSTI').ej2_instances[0].refresh();
                zapamti_this.$refs.modalDialogNepokretnosti.hide();
            });
        },
        methods: {
            modalBtnNepokretnostiClick: function () {
                bus.$emit('ResetDodajNepokretnostData', null);
                this.$refs.modalDialogNepokretnosti.show();
            },
            modalDlgNepokretnostiClose: function () {
                //document.getElementById('modalbtn').style.display = '';
            },
            modalDlgNepokretnostiOpen: function () {
                bus.$emit('ResetDodajNepokretnostData', null);
            },
            dlgButtonNepokretnostiClick: function () {
                this.$refs.modalDialogNepokretnosti.hide();
            },
            overlayNepokretnostiClick: function () {
                this.$refs.modalDialogNepokretnosti.hide();
            },
            onChangeNepokretnosti: function (args) {
                if (args.checked) {
                    this.$refs.modalDialogNepokretnosti.overlayClick = () => {
                        this.$refs.modalDialogNepokretnosti.hide();
                    }
                }
                else {
                    this.$refs.modalDialogNepokretnosti.overlayClick = () => {
                        this.$refs.modalDialogNepokretnosti.show();
                    }
                }
            },
            onSubmit: function () {
                console.log(this.data);
            }
        }
    }
</script>
<style>
    .card-body {
        min-height: 640px
    }

    .e-dialog .e-dlg-header-content + .e-dlg-content {        
        min-height: 160px;
    }
</style>


This is my template: 

<template>
    <div>
        <label class="control-label">{{$t('Vrsta_nepokretnosti')}}</label>
        <ejs-dropdownlist class="form-control"
                          id='realestate'
                          name="realestate"
                          v-model="data.realestate_ID"
                          :dataSource='realestateData'
                          :fields="realestateDataFields">
        </ejs-dropdownlist>
        <label>{{data.realestate_ID}}</label>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
    Vue.use(DropDownListPlugin);

    export default {
        name: 'dodaj-nepokretnost',
        data: function () {
            return {
                realestateData: [
                    { NAME: this.$t('Parcela'), ID: 1 },
                    { NAME: this.$t('Objekat'), ID: 2 },
                    { NAME: this.$t('Podobjekat'), ID: 3 }],
                realestateDataFields: { text: 'NAME', value: 'ID' },
                data: {
                },
            }
        },
        mounted: function () {
            var zapamti_this = this;

            bus.$on('ResetDodajNepokretnostData', (item) => {
                zapamti_this.data = {};
            });
            bus.$on('ModalDodajNepokretnostSubmit', (item) => {
                zapamti_this.data.realestate_TEXT = document.getElementById('realestate').ej2_instances[0].text;
                index++;
                zapamti_this.data.INDEX = index;

                bus.$emit('DodajNepokretnost', zapamti_this.data);
            });
        }
    }


</script>


3 Replies
SI Silambarasan I Syncfusion Team October 10, 2018 09:57 AM UTC

Hi Marko, 
 
Thank you for using Syncfusion products. 
 
Based on the provided example, we have prepared a sample and checked your reported issue by clearing the v-model value on Button click inside Dialog. The values are cleared in both DropDownList & label and its working fine in our end. Please refer the below attached sample for more information. 
 
 
Could you please check & replicate your issue in the above sample and get back to us with more information if still issue persist, so that we could able to sort out the cause of this issue and provide you a better solution quickly? The information provided would be great help for us to proceed further. 
 
Regards, 
Silambarasan 


ND Nenad Djurkovic October 17, 2018 01:30 PM UTC

Hello,

This sample is not the best solution for me.

I would like to achieve functionality that you achieved, but I would like to achieve that from the HelloWorld.vue component.

SI Silambarasan I Syncfusion Team October 22, 2018 12:46 PM UTC

Hi Marko, 
 
Thanks for your update. 
 
We have modified the previously provided solution to achieve your requirement from HelloWorld.vue component and the same can be demonstrated from the below sample link. 
 
 
Could you please check the above sample and get back to us with more information whether is this fulfilling your requirement, if not please share us more information regarding this so that we can analyze based on that and provide you a better solution. 
 
Regards, 
Silambarasan 


Loader.
Up arrow icon