Question

我正在尝试使用@click访问我的刀片文件中的方法但是我收到错误

注册-modal.vue

<template>
    <div>
        <div v-if="modal" class="animated fadeIn fixed z-50 pin overflow-auto bg-black flex">
            <div class="animated fadeInUp fixed shadow-inner max-w-md md:relative pin-b pin-x align-top m-auto justify-end md:justify-center p-8 bg-white md:rounded w-full md:h-auto md:shadow flex flex-col">

                <p class="text-xl leading-normal mb-8 text-center">
                    {{ __("Sign up to name to start socializing") }}
                </p>

                <div class="justify-center">
                    <form action="/auth/register" method="post">

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Name" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Email" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="mb-4">
                            <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
                                {{ __("Password" )}}
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight" id="username" type="text" placeholder="Username">
                        </div>

                        <div class="flex items-center justify-end">
                            <button class="bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4 rounded" type="button">
                                {{ __("Sign up") }}
                            </button>
                        </div>

                    </form>
                </div>

                <span @click="toggleModal" class="absolute pin-t pin-r pt-4 px-4">
                    <svg class="h-6 w-6 text-grey hover:text-grey-darkest" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function()
        {
            return {
                modal: false
            }
        }, 
        methods: {
            toggleModal: function() {
                console.log("djdjd")
                //this.modal = !this.modal
            }
        }
    }
</script>

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

Vue.component('signup-modal', require('./components/signup-modal.vue'));

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app'
});

我的刀片文件：

<div id="app">
    <button class="bg-blue w-full rounded-full text-white py-2 mb-2" @click="toggleModal">
            {{ __("Sign up") }}
        </button>
    </div>


    <div>
        <signup-modal></signup-modal>
    </div>

</div>

正如您在我的刀片文件中看到的，我正在尝试访问我的组件方法toggleModal，但我收到错误：

app.js:36520 [Vue warn]: Property or method "toggleModal" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)
warn @ app.js:36520
warnNonPresent @ app.js:37826
has @ app.js:37859
(anonymous) @ VM374:3
Vue._render @ app.js:40471
updateComponent @ app.js:38715
get @ app.js:39069
Watcher @ app.js:39058
mountComponent @ app.js:38722
Vue.$mount @ app.js:44467
Vue.$mount @ app.js:46866
Vue._init @ app.js:40567
Vue @ app.js:40656
(anonymous) @ app.js:13896
__webpack_require__ @ app.js:20
(anonymous) @ app.js:13869
__webpack_require__ @ app.js:20
(anonymous) @ app.js:63
(anonymous) @ app.js:66
app.js:36520 [Vue warn]: Invalid handler for event "click": got undefined

为什么会这样，我该如何解决？

Answer 1

为了实现我想做的事情，我采用了基于事件的方式。例如，在我的组件中，我添加了挂载的方法，并添加了以下内容：

mounted()
{
    eventHub.$on('signup-click', this.toggleModal)
}

我的主要Vue方法我添加了一个简单的事件发射器方法，如下所示：

const app = new Vue({
    el: '#app',

    methods: {
        generateEvent: (event) => {
            eventHub.$emit(event);
        }
    } 
});

然后在我的刀片文件中，我简单地调用了这样的方法：

<button class="bg-blue w-full rounded-full text-white py-2 mb-2" @click="generateEvent('signup-click')">
    {{ __("Sign up") }}
</button>

哪个简单发出事件，所以我的组件监听它，然后调用那个子方法。

无法访问我的刀片文件中的组件方法

1 个答案: