Vue/Laravel 5.3 -视图中未显示组件模板
Vue/Laravel 5.3 -视图中未显示组件模板
提问于 2016-10-13 13:17:19
我第一次尝试在我的视图中使用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>我的吞咽文件看起来是这样的：
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的安装，以及为什么模板没有显示。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-13 13:41:08
您正在将Vue安装到不建议的身体中。
来自Vue文档
提供的元素只是作为一个安装点。与Vue 1.x不同的是，在所有情况下，挂载元素都将被Vue生成的DOM替换。因此，不建议将根实例挂载到
<html>或<body>。
尝试将其挂载到其他HTML元素中，如包装器<div>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40022115
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号