Question

我想在我的blade.php文件中使用JavaScript函数。我用一个非常简单的函数

创建了xyz.js文件

function picture(soemthing){
    document.getElementById('idXYZ').src = "example.com";
}

然后我将此文件添加到webpack.mix.js config：

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编译了我的脚本，并且图片功能包含在app.js文件中。现在我想在blade.php中添加一个表单，并在点击时调用图片功能。我创建了以下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。避免在模板中放置带副作用的标签，例如，因为它们不会被解析。

当我点击按钮时

错误新：76未捕获的ReferenceError：未定义xyz

据我所知，第一个错误表明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

Laravel blade.php使用通过mix编译的JavaScript到app.js

1 个答案: