laravel 中的 Javascript 函数未定义

Question

我在我的 app.js 中添加了一个 js 方法:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

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

function hello()
{
    alert("hello");
}

然后编译我的资源并将 app.js 添加到我的 View 中:

<script src="{{ asset('js/app.js') }}"></script>

如果此时加载我的 View 并查看源代码，我可以看到指向 app.js 的链接，如果我打开该 app.js，我可以在其中看到我的 hello 方法以及许多其他内容。

现在，当我想调用我的方法时，我尝试这样做:

<a onclick="hello();">

但是在我的控制台中我得到了一个 Uncaught ReferenceError: hello is not defined 错误。可能是什么问题？

Answer 1

Laravel mix 倾向于将所有 js Assets 编译成一个不错的 webpackage，但这意味着您的函数实际上并不在全局范围内，因为它们都包含在 immediately invoked function expressions (iife) 中。 .

你需要:

window.hello = function () {
     alert("Hello");
}

然而，这通常不是最好的策略，理想情况下你会在你的 vue 中添加一个事件处理程序。