我不知道错误是什么,到目前为止,我正在通过控制台日志进行测试,以在选择文件(用于上传)后检查更改。
运行时$ npm run watch,出现以下错误:
$ npm run watch
“ Webpack正在监视文件… 发射95% 错误编译失败,出现1个错误 19:42:29 ./resources/assets/js/components/File.vue中的错误 (使用值代替Error的实例)Vue模板语法错误: 组件模板应仅包含一个根元素。如果在多个元素上使用v-if,请改为使用v-else-if链接它们。 @ ./resources/assets/js/components/AvatarUpload.vue 5:2-181 @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/ sass / app.scss”
“ Webpack正在监视文件…
发射95%
错误编译失败,出现1个错误 19:42:29
./resources/assets/js/components/File.vue中的错误
(使用值代替Error的实例)Vue模板语法错误:
组件模板应仅包含一个根元素。如果在多个元素上使用v-if,请改为使用v-else-if链接它们。
@ ./resources/assets/js/components/AvatarUpload.vue 5:2-181 @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/ sass / app.scss”
我的File.vue是
<template> <div class="form-group"> <label for="avatar" class="control-label">Avatar</label> <input type="file" v-on:change="fileChange" id="avatar"> <div class="help-block"> Help block here updated 4 🍸 ... </div> </div> <div class="col-md-6"> <input type="hidden" name="avatar_id"> <img class="avatar" title="Current avatar"> </div> </template> <script> export default{ methods: { fileChange(){ console.log('Test of file input change') } } } </script>
关于如何解决这个问题的任何想法?实际上是什么错误?
您的模板中有两个根元素。
<div class="form-group"> ... </div> <div class="col-md-6"> ... </div>
而你需要一个。
<div> <div class="form-group"> ... </div> <div class="col-md-6"> ... </div> </div>
本质上,在Vue 中,模板中 必须 只有一个根元素。