Property or method “Name” is not defined on the instance but referenced during render

Question

I'm having a problem in closing my modal inside the template in vue.js

Here's my code:

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="showModal=false">Cancel</button>
    `
});

export default something;

Here's my html

<div id="something">
        <mymodal v-show="showModal"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

Basically, my modal for opening is working properly. Just the close modal that's trigger inside the template in my .js file that I have an error that says,

Property or method "showModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

The error is quite descriptive here: your component doesn't have any property named showModal. Can you show how this component is used in your root html? — raina77ow
It is looking for a method instead of changing the showModal variable because that variable is in other component, not in the modal component — Jordy García
I suggest to use event emitters to complete your modal functionality — Jordy García
I already tried to use methods: for events in opening and closing, but I still have the same issues. — jsonGPPD

Jordy García Jordy García · Accepted Answer · 2017-12-15T17:55:28

Try this:

var something = new Vue({
    el: "#something",
    data: {
        showModal: false
    }
});

Vue.component("mymodal",
{
    template: `
      <button class="button" @click="closeModal()">Cancel</button>
    `,
    methods : {
        closeModal() {
            this.$emit('closeModal');
        }
    }
});

export default something;

And in your html:

<div id="something">
        <mymodal v-show="showModal" v-on:close-modal="showModal = false"></mymodal>
        <button @click="showModal = true" class="button is-info">Open Modal</button>
</div>

Property or method “Name” is not defined on the instance but referenced during render

1 Answers