1

我想在我的 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 编译了我的脚本，并将图片功能包含在 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 未捕获的引用错误：未定义 xyz

我知道第一个错误表示未加载 app.js 文件，这就是找不到图片的原因。我应该如何包含 app.js 或任何其他由混合 JavaScript 文件编译的文件？真的是导致这个问题的标签吗？

4

1 回答 1

0

我认为您收到错误是因为您在 vue.js 应用程序 div 中放置了一个新的脚本标签。

如果你打开你的布局文件app.blade.php，有一个 divid="app"里面有你的内容部分。副作用意味着您不应该在 Vue.js 模板中加载新脚本。

该脚本应该在您的布局中 body 标记的末尾。脚本标记也应如下所示： <script src="{{ asset('js/app.js') }}"></script>

然后你的脚本应该可用。但我会看看 Vue.js 以及你如何处理那里的点击事件。单击处理程序文档

于 2017-04-12T20:49:41.867 回答