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

【问题标题】：Property or method is not defined on the instance but referenced during render - Vue属性或方法未在实例上定义，但在渲染期间引用 - Vue
【发布时间】：2018-07-24 06:41:00
【问题描述】：

我有一个与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 为例。

【问题讨论】：

标签： laravel vue.js vue-component

【解决方案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>

【讨论】：

谢谢，这很有帮助，错误消失了，但点击按钮后模式不显示。没有出现其他错误
感谢您的更新，但现在我无法关闭模式 (Computed property "showModal" was assigned to but it has no setter)。我想我必须在打开模式后在true 上设置此属性？
是的，您需要为计算属性定义 getter 和 setter，并在刀片模板中的属性分配上设置 sync*。我已更新我的评论以显示这一点。 *取决于 vuejs 的版本

【解决方案2】：

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

【讨论】：