Laravel Blade.php 使用混合编译的 JavaScript 到 app.js
Posted
技术标签:
【中文标题】Laravel Blade.php 使用混合编译的 JavaScript 到 app.js【英文标题】:Laravel blade.php use JavaScript compiled by mix to app.js 【发布时间】:2017-09-08 18:30:57 【问题描述】:我想在我的 Blade.php 文件中使用 javascript 函数。我用一个非常简单的函数创建了 xyz.js 文件
function picture(soemthing)
document.getElementById('idXYZ').src = "example.com";
然后我将此文件添加到 webpack.mix.js 配置中:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
然后运行:npm run dev。到目前为止一切顺利,npm 编译了我的脚本,并且 picture 函数包含在 app.js 文件中。现在我想在blade.php 中添加一个表单并在点击时调用picture 函数。我创建了以下 Blade.php 文件:
@extends('layouts.app')
@section('content')
<div class="container">
<form>
Enter url: <input type="text" id="someID">
<input type="button" onclick="picture($('#someID').val())" value="Click"/>
</form>
</div>
<script src=" mix('js/app.js') "></script>
@endsection
在这里我真的迷路了(顺便说一句:我一直是后端的人)。在页面重新加载浏览器显示
[Vue 警告]:编译模板时出错:模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签,例如 ,因为它们不会被解析。
当我点击按钮时,我有
错误 new:76 Uncaught ReferenceError: xyz is not defined
我了解第一个错误表明 app.js 文件未加载,这就是找不到 图片 的原因。我应该如何包含 app.js 或任何其他由混合 JavaScript 文件编译的文件?真的是导致这个问题的标签吗?
【问题讨论】:
【参考方案1】:我认为您收到错误是因为您在 vue.js 应用程序 div 中放置了一个新的脚本标签。
如果您打开布局文件app.blade.php
,则有一个带有id="app"
的div,在其中您将获得内容部分。副作用意味着您不应该在 Vue.js 模板中加载新脚本。
脚本应该在你的布局中body标签的末尾。脚本标记也应如下所示:
<script src=" asset('js/app.js') "></script>
那么您的脚本应该可用。但我会看看 Vue.js 以及你如何处理那里的点击事件。 click handler docs
【讨论】:
我有你在 app.blade.php 文件中提到的确切的以上是关于Laravel Blade.php 使用混合编译的 JavaScript 到 app.js的主要内容,如果未能解决你的问题,请参考以下文章
请教laravel view 怎么显示 controller 中传递的对象值
使用 Laravel 8(和 Jetstream)将自定义数据传递到 login.blade.php
无法使用 Laravel (blade.php) 加载具有较长链接的样式