Vue/Laravel 5.3 - шаблон компонента не отображается в представлении

Я пытаюсь использовать компонент Vue на своем представлении в первый раз. Я создал файл assets/js/components/ImageUpload.vue который выглядит следующим образом:Vue/Laravel 5.3 - шаблон компонента не отображается в представлении

<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>

My app.js выглядит следующим образом:

require('./bootstrap'); 

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

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

Vue.use(VueResource); 

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

На мой взгляд, я вставив компонент, как это:

<image-upload></image-upload>

Мой 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>.

Попробуйте установить его в какой-либо другой элемент HTML, как обертка <div>

источник

2016-10-13 13:41:08 flipjms

Я действительно думал, так как это было только предупреждение, что это не повлияет, но когда я изменил его ид = "приложение " это сработало. Благодаря! Единственное, что странно в том, что установка на тело отлично работает в другом проекте, который у меня есть? – Marco

Возможно, вы используете Vue 1. * – flipjms

Vue/Laravel 5.3 - шаблон компонента не отображается в представлении

ответ

Смежные вопросы