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>
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;
}
}
};