Question

我有一个Vue组件与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>

我正在使用blade模板中的组件：

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

我收到错误

属性或方法“showModal”未在实例上定义，但在呈现期间引用。

我的组件出了什么问题？

我以JSFiddle为例。

Answer 1

原因是您在根组件中定义了showModel，而AuthForm是其中的一个。

将AuthForm.vue中的脚本更改为：

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

或者你可以编写一个计算方法来从父组件中获取值。

修改

好吧，我知道你需要什么。你需要使用属性

刀片模板

<div id="app"> <button id="show-modal" @click="showModal = true">Auth</button> <auth-form :show.sync="showModal"></auth-form> </div>
AuthForm.vue中的
脚本

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

Answer 2

showModal是父Vue中的数据项，而不是组件中的数据项。由于您希望它们是相同的，因此您应该将showModal传递给子组件as a prop。子组件中的单击应该emit an event父进程处理（通过更改值）。

属性或方法未在实例上定义，但在呈现期间引用 - Vue

2 个答案: