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 · Accepted Answer · 2017-05-29 02:32:35Z

1

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

answered May 29, 2017 at 2:32

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kyle Becker Over a year ago

Uhg, yes. Thank you.

Collectives™ on Stack Overflow

Vue Component Not Updating Data on Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related