Laravel vue js integration - ブレードファイルに値がありません

vue.jsをlaravel 5.3と統合しようとしています。パブリックフォルダにmain.jsファイルを作成する "gulp"を呼び出します。 jsファイルがロードされているが、 "message"の値が表示されていないことがブラウザでわかります。それは{{message}}のみ書かれています。なぜどんなアイデア？Laravel vue js integration - ブレードファイルに値がありません

<body> 
    <div class="container"> 
     <div class="content"> 
      <div class="title">     
       <p>@{{ message }}</p> 
      </div> 
     </div> 
    </div> 
    <script src="js/main.js"></script> 
</body>

gulpfile：

var elixir = require('laravel-elixir'); 
require('laravel-elixir-browserify-official'); 
require('laravel-elixir-vueify'); 

elixir(mix => { 
    mix.sass('app.scss').browserify('main.js'); 
});

main.js：

import Vue from 'vue'; 

var app = new Vue({ 
    el: 'body', 
    data: { 
     message: 'Hello Vue!' 
    } 
})

package.json：

"dependencies": { 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-9", 
    "laravel-elixir-browserify-official": "^0.1.3", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-vueify": "^1.0.0", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.16.2", 
    "vue": "^2.0.1", 
    "vue-resource": "^1.0.3" 
}

出典

2017-02-05 Steve

EDIT

package.json

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch", 
    "slate": "rimraf node_modules && npm install", 
    "clean": "rimraf public/css/app.css public/css/app.css.map public/js/app.js && npm run dev" 
    }, 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.1", 
    "laravel-elixir": "^6.0.0-15", 
    "laravel-elixir-browsersync-official": "^1.0.0", 
    "laravel-elixir-vue-2": "^0.3.0", 
    "laravel-elixir-webpack-official": "^1.0.10", 
    "lodash": "^4.17.2", 
    "moment": "^2.17.1", 
    "vue": "^2.1.6", 
    "vue-resource": "^1.0.3", 
    "vuex": "^2.1.1" 
    } 
}

gulpfile.js

const elixir = require('laravel-elixir'); 

require('laravel-elixir-vue-2'); 

/* 
|-------------------------------------------------------------------------- 
| Elixir Asset Management 
|-------------------------------------------------------------------------- 
| 
| Elixir provides a clean, fluent API for defining some basic Gulp tasks 
| for your Laravel application. By default, we are compiling the Sass 
| file for our application, as well as publishing vendor resources. 
| 
*/ 

elixir(mix => { 
    mix 
     .sass('app.scss') 
     .webpack('main.js'); 
});

あなたのコードでは、一つのことを除いて結構です。 Vue JS vue js rootとしてbody要素を使用することはお勧めしません。

提供された要素は単にマウントポイントとして機能します。 Vue 1.xとは異なり、マウントされた要素はすべての場合にVue生成DOMに置き換えられます。したがってにルート・インスタンスをマウントしたり、提案のように、私が編集した

https://vuejs.org/v2/api/#el

コード

<body> 
    <div class="container" id="app"> <!-- Mind the id attached --> 
     <div class="content"> 
      <div class="title">     
       <p>@{{ message }}</p> 
      </div> 
     </div> 
    </div> 
    <script src="js/main.js"></script> 
</body>

とmain.js

import Vue from 'vue'; 

var app = new Vue({ 
    el: '#app', // mind the root element is changed to app. 
    data: { 
     return { // mind the return in data 
     message: 'Hello Vue!' 
     } 
    } 
});

出典

2017-02-05 15:09:23 rummykhan

することは推奨されません。しかし、それと同じ問題です。他のアイデア？ – Steve

はい..コードを更新します。 – rummykhan

vueのdata（）内のreturn文を参照してください – rummykhan

Laravel vue js integration - ブレードファイルに値がありません

答えて

関連する問題