属性或方法未在示例上定义，但在渲染期间引用- Vue

c90pui9n 于 2022-12-19 发布在 Vue.js

关注(0)|答案(2)|浏览(146)

我有一个与Laravel应用程序配合使用的Vue组件：
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作为例子。

vue.js

来源：https://stackoverflow.com/questions/48774520/property-or-method-is-not-defined-on-the-instance-but-referenced-during-render

2条答案

按热度按时间

cclgggtu1#

原因是您已经在根组件中定义了showModel，而AuthForm是它的子组件。
将AuthForm.vue中的脚本更改为：

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

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

编辑：

ahh ok我看到你需要什么.你将需要到使用属性代替
叶片样板

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

赞(0）回复(0）举报 2022-12-19

gcuhipw92#

showModal是父Vue中的数据项，而不是组件中的数据项。由于您希望它们是相同的东西，因此您应该将showModal作为prop传递给子组件。子组件中的单击应该发出父组件处理的事件（通过更改值）。

赞(0）回复(0）举报 2022-12-19