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

Question

I'd like to use a JavaScript function in my blade.php file. I created the xyz.js file with a very simple function

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

Then I added this file to the 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');

and run: npm run dev. So far so good, npm compiled my script and the picture function was included in the app.js file. Now I'd like to add a form in blade.php and call the picture function on click. I created the following blade.php file:

@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

And here I got really lost (btw: I was always the backend guy). On page reload browser displays

[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

And when I click the button I have

Error new:76 Uncaught ReferenceError: xyz is not defined

I understand that the first errors says that the app.js file was not loaded and that's the reason why picture is not found. How should I include app.js or any other compiled by mix JavaScript file? Is it really the tag causing this problem?

Answer 1

I think you're getting the error because you're placing a new script tag inside of the vue.js application div.

If you're opening your layout file app.blade.php there is a div with id="app" and inside it you're having your content section yield. Side-effect means that you shouldn't load a new script inside a Vue.js template.

The script should be in your layout at the end of the body tag. Also the script tag should look like this: <script src="{{ asset('js/app.js') }}"></script>

Then your script should be available. But I would have a look at Vue.js and how you're handling click events there. click handler docs

Answer 2

Try this I solved me

<script src="{{ asset('js/app.js') }}?time={{ time() }}"></script>

" I think not all browsers support this "