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添加到我的视图中:

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

如果我在这一点上加载我的视图并查看源代码我可以看到app.js的链接,如果我打开app.js,我可以在那里看到我的hello方法还有很多其他东西.

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

<a onclick="hello();">

但是在我的控制台中我得到一个未捕获的ReferenceError:hello未定义错误.可能是什么问题呢？

Answer 1

Laravel mix倾向于将所有js资产编译成一个不错的webpack时代,但是这意味着你的函数实际上并不在全局范围内,因为它们都包含在立即调用的函数表达式(iife)中.

你需要:

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

但是,这通常不是最好的策略,理想情况下,您可以在vue中添加事件处理程序.