我第一次尝试在我的 View 中使用 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');
});
但是 View 中没有任何反应。有一个元素 <image-upload></image-upload>但是模板中没有显示任何内容，控制台中唯一的错误是:
[Vue warn]: Do not mount Vue to or - mount to normal elements instead.
由于我不是 JavaScript 专家，而是 Vue 初学者，所以我不知道在哪里可以更改 Vue 的安装以及为什么不显示模板。
最佳答案
您正在将 Vue 安装到正文中，这是不推荐的。
来自Vue docs :
The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to
<html>or<body>.
尝试将其安装在其他一些 HTML 元素中，例如包装器 <div>
关于laravel - Vue/Laravel 5.3 - 组件模板未显示在 View 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40022115/