Vue Component Not Updating Data on Function

Question

I have two vue components:

Vue.component('event', {
    props:['event'],
    template: `
        <span class="pointer" @click="showModal = true">
            {{event.evname}}
            <modal @hide='hideModal' :event="event" :showModal="showModal">
                <div slot="title">{{event.evname}}</div>
                <div slot="content">{{event}}</div>
            </modal>
        </span>`,
    data: function(){
        return{
            showModal: false
        }
    },
    methods: {
        hideModal: function(){
            this.showModal = false
        }
    }
})

and

Vue.component('modal', {
    props:['event', 'showModal'],
    template: `
        <div v-if="showModal" class="modalBack">
            <div class="container modalPopup">
                <div class="row">
                    <span class="col-lg-11"><slot name="title"></slot></span><span class="pointer col-lg-1" @click="hide">X</span>
                    <slot name="content"></slot>
                </div>
            </div>
        </div>`,
    methods: {
        hide: function(){
            this.$emit('hide')
        }
    }
})

The modal is showing fine when I click the event name, however, when I try to close the event by clicking the 'X' on the modal, it is emitting 'hide' and the hideModal method under event is running, but my modal is staying up. When I console log 'this.showModal' after trying to close it, it is displaying false, however if I console.log 'this' and look at showModal, I see it is still equal to true.

Any idea what could be happening? The idea is showModal will be set to false, which will be passed down to the modal component, and the modal component will close.

Bert Bert · Accepted Answer · 2017-05-29T02:32:35

Your problem here is that the modal is embedded inside the span that has the click handler that sets showModel = true. So when you click on the X to close the modal, you are also clicking on the span. showModal gets set to false, and then immediately gets set back to true.

To fix it, move the modal outside of the span.

template: `
  <div>
    <span class="pointer" @click="showModal = true">
        {{event.evname}}
    </span>
    <modal @hide='hideModal' :event="event" :showModal="showModal">
       <div slot="title">{{event.evname}}</div>
       <div slot="content">{{event}}</div>
    </modal>
  </div>
`,

Vue Component Not Updating Data on Function

1 Answers