Property or method is not defined on the instance but referenced during render - Vue

0
votes

I have a Vue component using with Laravel app:

resources/assets/js/app.js:

Vue.component('auth-form', require('./components/AuthForm.vue'));

const app = new Vue({
    el: '#app',
    data: {
        showModal: false
    }
});

AuthForm.vue:

<template>
    <div v-if="showModal">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" @click="showModal=false">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                modal body
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "auth-form"
    }
</script>

<style scoped>
    ...
</style>

I'm using component inside blade template:

<div id="app">
    ...
    <button id="show-modal" @click="showModal = true">Auth</button>
    ...
    <auth-form></auth-form>
</div>

And I'm getting error

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

What's wrong with my component?

I used this JSFiddle as example.

2
laravelvue.jsvue-component

2 Answers

0
votes

showModal is a data item in the parent Vue, and not in the component. Since you want them to be the same thing, you should pass showModal to the child component as a prop. The click in the child component should emit an event that the parent handles (by changing the value).

0
votes

The reason is you have defined showModel in the root component and AuthForm is a child of this.

change the script in AuthForm.vue to:

<script>
    export default {
        name: "auth-form",
        data:function(){
             return {
                 showModal: false  
             }
        }
    } 
 </script>

Or you could write a computed method to get the value from the parent component.

edit:

ahh ok i see what you require. you will need to use properties instead

blade template

<div id="app">
    <button id="show-modal" @click="showModal = true">Auth</button>
    <auth-form :show.sync="showModal"></auth-form>
</div>

script in AuthForm.vue

<script>
    export default {
        name: "auth-form",
        props:['show'],
        computed:{
            showModal:{
                get:function(){
                    return this.show;
                },
                set:function(newValue){
                    this.show = newValue;
                }

            }
        }
    }
</script>