一尘不染

Vue JS错误:组件模板应仅包含一个根元素

node.js

我不知道错误是什么,到目前为止,我正在通过控制台日志进行测试,以在选择文件(用于上传)后检查更改。

运行时$ 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”

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

关于如何解决这个问题的任何想法?实际上是什么错误?


阅读 366

收藏
2020-07-07

共1个答案

一尘不染

您的模板中有两个根元素。

<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 中,模板中 必须
只有一个根元素

2020-07-07