1. ホーム
  2. 質問と答え
  3. LaravelのVueJSの設定

LaravelのVueJSの設定

2016-12-18 9 views
5

laravelでの使用のためにVueJS2をインストールしました。 簡単なテストのセットアップを開始し、これはapp.blade.phpLaravelのVueJSの設定

<!DOCTYPE html> 
<html> 
<head> 
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>MEDIFAKTOR - @yield('title') </title> 
    <link rel="stylesheet" href="css/vendor.css" /> 
    <link rel="stylesheet" href="css/app.css" /> 
</head> 
<body> 

    <!-- Wrapper--> 
    <div id="wrapper"> 
     <!-- Navigation --> 
     @include('layouts.navigation') 
     <!-- Page wraper --> 
     <div id="page-wrapper" class="gray-bg"> 
      <!-- Page wrapper --> 
      @include('layouts.topnavbar') 
      <!-- Main view --> 
      @yield('content') 
      <!-- Footer --> 
      @include('layouts.footer') 
     </div> 
     <!-- End page wrapper--> 
    </div> 
    <!-- End wrapper--> 
<script src="js/app.js" type="text/javascript"></script> 
    <script> 
     var data = { 
      message: 'Greetings your majesty' 
     }; 
     new Vue({ 
      el: '#app', 
      data: data 
     }) 
    </script> 
    @section('scripts') 
@show 
</body> 
</html>

であり、この内容は、私が更新すると

が

index.blade.php

@extends('layouts.app') 
@section('title', 'Main page') 
@section('content') 
    <div class="wrapper wrapper-content animated fadeInRight"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <div class="text-center m-t-lg"> 
          <h1>MEDIFAKTOR server</h1> 
         </div> 
         <div id="app"> 
          <h1>{{message}}</h1> 
         </div> 
        </div> 
       </div> 
      </div> 
@endsection

、私が取得表示したいですエラー：

ErrorException in 80e040fb5fff0b0cf766194784388a0cd255e6c9.php line 10: Use of undefined constant message - assumed 'message' (View: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)

VueJSが認識されないのと同じように、私には聞こえます。私はVueJSのウェブサイトとlaracasts.comに従ってインストールしました

私はそれを間違った場所に配置しましたか？

Package.json

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "gulp": "^3.9.1", 
    "laravel-elixir": "^6.0.0-9", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.14.0" 
    } 
}

出典

2016-12-18 sesc360

+1

{{messag VUEのJSファイルのためのonloadイベントを使用するにはe}}はインデックスブレードには定義されていません...インデックスブレードをロードするコントローラコードを投稿してください..... {{message}}の代わりに{{message}}を使用してください。{{varibale}}はPHP変数を検索しますが、JS変数の検索は@ {{variable}}です.VueJSを意味します – webDev

答えて

3

は、あなたのインデックスブレードに{{メッセージ}}の代わりに、{{メッセージ}} @を使用してみてください。あなたのメッセージはPHPのJSフレームワーク変数ではないからです。変数の前に@という記号を付けてください。

出典

2016-12-18 19:28:17 webDev

+0

「{{message}}」のウェブサイトに表示されているコンテンツが置き換えられていません。したがって、変数はコンテンツで埋められません。私はVUEJSがまだ認識されていないと感じていますか？デベロッパーコンソールにこのエラー（インデックス）が表示されます：96 Uncaught ReferenceError：Vueが定義されていません しかし、私はapp.blade.phpにCDNリンクを挿入しました – sesc360

+0

あなたのアプリのメインJSファイルでは、 vue '"とすると、JSは" Vue "を認識できます。はい、あなたはCDNを持っていますが、VueJSでは、個々のモジュールをインポートし、実行全体を通して利用可能にする必要があります。これは良いリソースですhttps://learninglaravel.net/topics/vuejs、リンクを訪問し、最初に研究している。 – webDev

0

vuejsの中括弧{{}}のレンダリングに問題がある場合は、 {{}} @ あなたは必ずいずれかのそれらの間のdoesnt得ることを作る刃に刃の @verbatim HTMLコード{{vuejs_vars}} @endverbatim

そのままタグを考慮することができるトリックを行う必要がありますか 物事を簡単にするためにブレードエンジンによって解析された&はそのまま出力されます。

出典

2017-01-01 23:55:03

0

Vueはassets/bootstrap.jsで宣言されています。だから、そこにチェックしてください。 Vueインスタンスの作成されたフックでデバッグされている可能性があります。

ここからデバッグしてみてください。

出典

2017-02-24 16:21:06

1

あなたは @記号に問題を解決した場合は、まだあなたはコメントで言ったように、「Vueのが定義されていません」というエラーを取得する、あなたのコードのタイプミスを持っている - あなたは属性SRCを使用する必要があり、いいえscrです。 vue.min.jsのを含むので、修正する必要がありますが、そのようになっています

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

はまた、あなたがあなたのJSコードが読み込まれるvue.min.js前に実行し始めている問題を得ることができます、してみてください

<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script> 
<script type="text/javascript"> 
function vueIsReady(){ 
     var data = { 
      message: 'Greetings your majesty' 
     }; 
     new Vue({ 
      el: '#app', 
      data: data 
     }) 
} 
</script>

それとも、このことからimportScript機能を使用することができます：https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement

// definition of the function importScript ... 

// call function importScript with two parameters - script URL and onload handler function 
importScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){ 
    function vueIsReady(){ 
     var data = { 
      message: 'Greetings your majesty' 
     }; 
     new Vue({ 
      el: '#app', 
      data: data 
     }) 
    } 
});

出典

2017-03-13 23:51:10

関連する問題

 関連する問題