Laravel Blade.php 使用混合编译的 JavaScript 到 app.js

Question

我想在我的 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 文件编译的文件？真的是导致这个问题的标签吗？

Answer 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