vue.jsmodal-dialogvue-component

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


I am relatively new to vue.js. I am trying to create a modal dialog that has an initial displayed state set to false. This dialog is used in another component as shown below. I cannot figure out why the data option's isOpen variable is undefined

// My main component is here
<template>
 <button @click="openMyModal">Open</button>
 <MyDialog ref="dialog"/>
</template>
<script>
...
methods: {
 openMyModal(){
    this.$refs.dialog.open().then((confirm) => {
          console.log("confirm", confirm)
          return true
        }).catch();
 }
}
...
</script>
<template>
  <div class="overlay" v-if="isOpen">
    <div class="modal">
     <h1>My modal dialog here</h1>
    </div>
   </div>
 </div>
</template>
<script>
export default {
    name: 'my-dialog'
}
 data () {
      return {
        isOpen: false
        ...
      }
 }
 methods() {
  open() {
        this.isOpen = true;
        ...
      },
  close() {
        this.isOpen = false;
      },
}
</script>

Solution

  • It is mostly because of syntax errors. Here is an example after debugging your code:

    In the parent:

    methods: {
        openMyModal() {
          this.$refs.dialog.open();
        }
    }
    

    In the child:

    export default {
      name: "my-dialog",
      data() {
        return {
          isOpen: false
        };
      },
      methods: {
        open() {
          this.isOpen = true;
        },
        close() {
          this.isOpen = false;
        }
      }
    };