Question

首先，资源/ js / app.js中的代码

function button1Clicked(){
  console.log('Button 1 is clicked');
}

第二，test.blade.php中的代码

<!DOCTYPE html>
<html>
<head>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Testing</title>
</head>
<body>
  <button onclick="button1Clicked()">Button 1</button>
  <button onclick="button2Clicked()">Button 2</button>

  <script type="text/javascript" src="{!! asset('js/app.js') !!}"></script>
  <script type="text/javascript">
    function button2Clicked(){
      console.log('Button 2 is clicked');
    }
  </script>
</body>
</html>

在npm run dev之后并在localhost中进行测试

因此，button1Clicked()中的JavaScript函数resources/js/app.js未定义。但是可以定义button2Clicked()中的函数testing.blade.php。这是来自Laravel Mix的错误还是我犯了一些错误

Answer 1

我和你有同样的问题。事实证明，当Laravel-mix（又名Webpack）编译js时，它使用闭包包装了我们的函数。这就是为什么我们可以访问该闭包内部的变量或函数，因为它限制了我们的范围。

例如，当我们定义这样的函数

function setlocale(code) {
     console.log(code);
}

Webpack将生成为

(function(module, exports, __webpack_require__) {

     function setlocale(code) {
         console.log(code);
     }

});

一个简单的解决方案是将函数设置为window变量，这是全局变量。

window.setlocale = function (code) {
    console.log(code);
}

Answer 2

如何删除onclick属性并添加ID：

#server input data
userLoc = tf.placeholder(tf.float32, shape=[None, 2])

def calculate_dist(user_loc):
  distanceList = []
  for i in taxiData:
    taxiId=tf.constant(i[0],dtype=tf.string,shape=[])
    taxiLat=tf.constant(i[1],dtype=tf.float32,shape=[])
    taxiLon=tf.constant(i[2],dtype=tf.float32,shape=[])
    distanceValue=6371*tf.acos(tf.cos(radian*user_loc[0])*
        tf.cos(radian*taxiLat)*tf.cos(radian*taxiLon-
        radian*126.8943311)+tf.sin(radian*37.4685225)*tf.sin(radian*taxiLat))
    tmpDistance=[]
    tmpDistance.append(taxiId)
    tmpDistance.append(distanceValue)
    distanceList.append(tmpDistance)
  # result sort
  sId,distances=zip(*distanceList)
  indices = tf.nn.top_k(distances, k=len(distances)).indices
  return tf.gather(sId, indices[::-1])[0:5]

result = tf.map_fn(calculate_dist, userLoc)

脚本

<button id="btn1">Button 1</button>

检查代码段

＆＃13;

$(document).ready(function(){
    function button1Clicked(){
       console.log('Button 1 is clicked');
    }
  $("#btn1").click(button1Clicked);
});

＆＃13;

$(document).ready(function() {
  function button1Clicked() {
    console.log('Button 1 is clicked');
  }
  $("#btn1").click(button1Clicked);
});

＆＃13;

Answer 3

由于在通过laravel mix / webpack构建/打包资产时，无法访问窗口对象，因此这就是为什么onclick事件处理程序对于代码本身而言未定义的原因。因此，如果window.setlocale方法不太适合您，那么另一种方法是使用jQuery click事件进行绑定，例如

$("#button-id").on("click",function() => {
       // enter code here
})

Answer 4

如下更新资源/js/app.js中的代码-

button1Clicked = function(){
    console.log('Button 1 is clicked');
};

然后它将可用于全局范围。

Laravel Mix没有定义JavaScript函数

4 个答案: