Laravel blade.php app.js와 혼합하여 컴파일 된 JavaScript 사용

내 blade.php 파일에서 JavaScript 함수를 사용하고 싶습니다.Laravel blade.php app.js와 혼합하여 컴파일 된 JavaScript 사용

mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js') 
.sass('resources/assets/sass/app.scss', 'public/css');

을 실행 : 나는 xyz.js가

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

그런 다음 나는 webpack.mix.js의 설정이 파일을 추가하는 매우 간단한 기능으로 파일을 생성 dev에 실행 NPM. 지금까지는 매우 좋았습니다. 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 catch되지 않은 ReferenceError가 : XYZ가

는 내가 처음 오류가 app.js 파일이로드되지 것을 말한다 이해 정의되지 않습니다 그 이유는 그림 찾을 수 없습니다. app.js 또는 다른 자바 스크립트 파일로 컴파일 된 것을 어떻게 포함해야합니까? 정말이 문제를 일으키는 태그입니까?

출처

2017-04-12 orim

vue.js 응용 프로그램 div 안에 새로운 스크립트 태그를 삽입했기 때문에 오류가 발생했다고 생각합니다.

레이아웃 파일 app.blade.php을 여는 경우 id="app" 인 div가 있고 그 안에 콘텐츠 섹션 수익률이 있습니다. 부작용은 Vue.js 템플릿 내에 새 스크립트를로드하지 않아야 함을 의미합니다.

스크립트는 body 태그의 끝에 배치되어야합니다. 또한 스크립트 태그는 다음과 같아야합니다. <script src="{{ asset('js/app.js') }}"></script>

스크립트를 사용할 수 있어야합니다. 하지만 Vue.js를보고 클릭 이벤트를 처리하는 방법에 대해 알아 보겠습니다. click handler docs

출처

2017-04-12 20:49:41 AWolf

태그 바로 앞에 app.blade.php 파일에서 언급 한 정확한

Laravel blade.php app.js와 혼합하여 컴파일 된 JavaScript 사용

답변

관련 문제