gpt4 book ai didi

laravel - Vue/Laravel 5.3 - 组件模板未显示在 View 中

转载 作者:搜寻专家 更新时间:2023-10-30 22:53:26 25 4
gpt4 key购买 nike

我第一次尝试在我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com