Question

我第一次尝试在视图中使用Vue组件。我创建了一个文件assets/js/components/ImageUpload.vue，如下所示：

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

我的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警告]：不要将Vue挂载或 - 而是安装到普通元素。

由于我不是javascript专家和Vue初学者，我不知道在哪里可以更改Vue的安装以及为什么模板没有显示。

Answer 1

您正在将Vue安装到身体中，这是不推荐的。

来自Vue docs：

提供的元素仅用作安装点。与Vue 1.x不同，在所有情况下，已安装的元素将替换为Vue生成的DOM。因此，建议不要将根实例挂载到<html>或<body>。

尝试将其安装在其他HTML元素中，例如包装器<div>

Vue / Laravel 5.3 - 组件模板未在视图中显示

1 个答案: