如何在vue-router模板上绑定事件

Question

我一直在遵循创建vue-router对象的指南，但是浏览器显示以下警告：

[警告]：属性或方法“ auth_login”未在实例上定义，但在渲染期间被引用。 确保在data选项中声明反应性数据属性。 （在匿名组件中找到-使用“名称”选项以获得更好的调试消息。）

我刚刚在html标签上添加了事件绑定，如下所示：

<div id="app">
    <router-view>
    </router-view>

    <script type="text/temptlate" id="t_auth">
        <div class="auth">
            <router-view></router-view>
        </div>
    </script>
    <script type="text/temptlate" id="t_auth_login">
        <div class="auth_login">
            <div>
                <button class="btn-primary full" id="btn_login" @click="auth_login" @keyup.enter="auth_login">登录</button>
            </div>
        </div>
    </script>
</div>

JS代码是：

(function() {
let getView = (id) => {
    tmp = document.getElementById(id)
    if (tmp == null) {
        return null;
    }
    return tmp.innerHTML
};

const routes = [{
    path: '/auth',
    component: { template: getView('t_auth') },
    children: [
        { path: 'register', component: { template: getView('t_auth_register') } },
    ]
}];

const router = new VueRouter({
    routes: routes
});

const app = new Vue({
    router: router,
    el: "#app",
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
        auth_login: function(event) {
            // 方法内 `this` 指向 vm
            alert('Hello ' + this.name + '!')
        }
    }
}).$mount('#app')
})();

为什么找不到auth_login方法？ 那么生命周期呢？

如何在模板中绑定事件？

完整的源代码位于此处： https : //github.com/295421489/reminder-ximu/tree/dev/public

Answer 1

对于您的问题，我没有直接答案，但这是您可以调试Vue应用程序的方法：

在您的Google Chrome浏览器中安装https://github.com/vuejs/vue-devtools 。 您可能需要重新启动浏览器，该扩展程序才能开始工作。 （我不记得我是第一次来的）

有了Vue开发工具后，无论何时加载Vue应用程序（Vue.js的开发版本），您都将在开发人员控制台中看到它：

您的路线也会显示得很好。 如您所见，我上面的应用当前位于/chapter/1路由（左侧的橙色框）

单击“发送到控制台”， $vm实例将在您的开发人员控制台中可用。

在这里，您可以找到您的auth_login方法是否可用。 而且，您还可以对应用程序进行更多调试。

如果您要测试运行中的Vue应用（带有路由），则可以在此答案中找到jsFiddle： https ://stackoverflow.com/a/40215123/654825

希望能帮助到你！

Answer 2

我解决了这个问题。

错误是找不到方法，我认为是由于范围。 因此，我首先创建了一个组件：

var t_auth_login = Vue.extend({
    template: getView('t_auth_login'),
    // 在 `methods` 对象中定义方法
    methods: {
        auth_login: function(event) {
    }
});

路线值为：

const routes = [{
path: '/auth',
component: t_auth}]

一切都好。