Vue/Laravel 5.3 - コンポーネントテンプレートがビューに表示されない

初めてビューでVueコンポーネントを使用しようとしています。私は、このようなファイルassets/js/components/ImageUpload.vue作成しました：Vue/Laravel 5.3 - コンポーネントテンプレートがビューに表示されない

<image-upload></image-upload>

：私の見解では私はこのようなコンポーネントを挿入しています

require('./bootstrap'); 

var VueResource = require('vue-resource'); 

Vue.component('image-upload', require('./components/ImageUpload.vue')); 

Vue.use(VueResource); 

const app = new Vue({ 
    el: 'body' 
});

：マイapp.js

<template> 
<div> 
    <div v-if="!image"> 
    <h2>Select an image</h2> 
    <input type="file" @change="onFileChange"> 
    </div> 
    <div v-else> 
    <img :src="image" /> 
    <button @click="removeImage">Remove image</button> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    data: { image: '' }, 
    methods: { 
     onFileChange: function onFileChange(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
     }, 
     createImage: function createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 
      reader.onload = function (e) { 
       vm.image = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 
     removeImage: function removeImage(e) { 
      this.image = ''; 
     } 
    } 
} 
</script>

を次のようになります

私のgulpfileは次のようになります：

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

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

elixir(mix => { 
    mix.copy('resources/assets/img', 'public/img'); 
    mix.copy('resources/assets/css', 'public/css'); 
    mix.copy('resources/assets/js', 'public/js'); 

    mix.sass('app.scss') 
     .webpack('app.js'); 
});

しかし、ビューでは何も起こりません。そこ要素<image-upload></image-upload>ですが、テンプレートからは何も示されていないので、コンソールで唯一の誤差がある：[ヴューが警告]

：へのVueをマウントしたりしないでください - 代わりに、通常の要素にマウント。

私はないjavascriptの専門家との合計のVueの初心者ですので、私はVueののマウントを変更することができ、なぜテンプレートが表示されていない見当がつかない。

出典

2016-10-13 Marco

Vueを本体に取り付けているため、お勧めできません。 Vue docsから

：

設け要素は単に取付け点としての役割を果たす。 Vue 1.xとは異なり、マウントされた要素はすべての場合にVue生成DOMに置き換えられます。したがって、ルートインスタンスを<html>または<body>にマウントすることは推奨されません。

それに影響を与えないことを警告だけだったので、私は実際には思ったが、私は、ID = "アプリにそれを変更したときのラッパー<div>

出典

2016-10-13 13:41:08 flipjms

のようないくつかの他のHTML要素でそれをマウントしよう" 出来た。ありがとう！私が持っている別のプロジェクトでは、身体への取り付けがうまく機能するということだけは奇妙なことですか？ – Marco

おそらくあなたはVue 1を使用しています。 – flipjms

Vue/Laravel 5.3 - コンポーネントテンプレートがビューに表示されない

答えて

関連する問題