如何在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}]

一切都好。