JavaScript函數沒有定義

Question

我添加了一個JS方法我app.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：你好沒有定義的錯誤。可能是什麼問題呢？

Answer 1

Laravel結構趨於編譯所有的JS資產注入一個不錯的WebPack年齡，然而，這意味着你的函數實際上不是在全球範圍內，因爲它們都被包裹在immediately invoked function expressions (iife)。

您需要：

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

然而，這一般不是最好的策略，理想情況下，你會在你的VUE添加事件處理程序。