Error message: The property or method "Name" is not defined on this object, but it is being referenced during the rendering process

Question

Error message: The property or method "Name" is not defined on this object, but it is being referenced during the rendering process

Currently facing a challenge in implementing the modal closure functionality within the Vue.js template.

Take a look at the code snippet:

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

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

export default modalInstance;

Check out the corresponding HTML:

<div id="modalInstance">
        <myCustomModal v-show="displayModal"></myCustomModal>
        <button @click="displayModal = true" class="button is-info">Open Modal</button>
</div>

Essentially, the modal opening is functioning as expected. However, the issue lies in closing the modal triggered within the template in the .js file. It generates an error message stating:

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

javascript vue.js vue-component

Answer 1

Answer №1

Give this a try:

let example = new Vue({
    el: "#example",
    data: {
        displayModal: false
    }
});

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

export default example;

Add this to your HTML:

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

Answer 2

Give this a try:

let example = new Vue({
    el: "#example",
    data: {
        displayModal: false
    }
});

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

export default example;

Add this to your HTML:

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

Error message: The property or method "Name" is not defined on this object, but it is being referenced during the rendering process

Answer №1

Similar questions

Can Conditional Compilation be Implemented in a Vue.js Project?

Navigating programmatically to another page in Next.js can be easily achieved by utilizing the useRouter hook

Efficiently Loading AJAX URLs using jQuery in Firefox

Can you help me understand how to access data from a selected option?

Activate the button when a checkbox is ticked or when using the "select all" checkbox

What is the best way to update the src of an input using an onclick event?

Images are failing to load in Ionic 3

Increase the bottom padding or add some extra space to the Bootstrap form or page

Battle of Kingdoms API ajax

Shifting JSON Arrays in JavaScript - Changing Order with Ease

execute function when loading a page on nuxt framework

The pre-loader is hidden behind the block content and navigation bar

Having trouble selecting a subset of data from an AJAX request using Jquery?

Unable to receive Ajax response

The useCallback hooks persist outdated values when the list is refreshed

Having issues with incorporating a component into another component in VueJS

Morris.js tutorial: Enhancing bar charts with data labels

Run code once all ajax requests have been completed

An array becomes undefined once the previous array is removed

Error: The term "Worker" is undefined in a new Nextjs project