Vue js 错误：组件模板应该只包含一个根元素

Question

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

当我运行 $ npm run watch 时，出现以下错误：

“Webpack 正在查看文件……

95% 排放

ERROR 编译失败，出现 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/萨斯/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>

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

原文由 Pathros 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意 此答案仅适用于 Vue 2.x 版本。 第 3 版取消了这一限制。

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

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

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如需更完整的答案：http: //www.compulsivecoders.com/tech/vuejs-component-template-should-contain-exactly-one-root-element/

但基本上：

• 目前，一个 VueJS 模板只能包含一个根元素（由于渲染问题）
• 如果您确实需要两个根元素，因为 HTML 结构不允许您创建包装父元素，您可以使用 vue-fragment 。

要安装它：

 npm install vue-fragment

要使用它：

 import Fragment from 'vue-fragment';
Vue.use(Fragment.Plugin);

// or

import { Plugin } from 'vue-fragment';
Vue.use(Plugin);

然后，在您的组件中：

 <template>
  <fragment>
    <tr class="hola">
      ...
    </tr>
    <tr class="hello">
      ...
    </tr>
  </fragment>
</template>

原文由 Charles Bochet 发布，翻译遵循 CC BY-SA 4.0 许可协议