javascript - Vue js错误: Component template should contain exactly one root element

Question

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

当我运行 $ npm run watch 时，我收到以下错误:

"Webpack is watching the files…

95% emitting

ERROR Failed to compile with 1 errors
19:42:29

error in ./resources/assets/js/components/File.vue

(Emitted value instead of an instance of Error) Vue template syntax error:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./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>

关于如何解决这个问题的任何想法？究竟是什么错误？

Answer 1

注意此答案仅适用于 Vue 2.x 版本。 Version 3 has lifted this restriction .

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

<div class="form-group">
  ...
</div>
<div class="col-md-6">
  ...
</div>

你需要一个。

<div>
    <div class="form-group">
      ...
    </div>

    <div class="col-md-6">
      ...
    </div>
</div>

基本上是 in Vue you must have only one root element in your templates .