CODEWITHSUNDEEP
javascriptvue.jsvue-component
jsonGPPD
jsonGPPD

Reputation: 1037

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

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.

Upvotes: 1

Views: 2918

Answers (1)

Jordy Garc&#237;a
Jordy Garc&#237;a

Reputation: 141

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>

Upvotes: 2

Related Questions