Question

我有以下组成部分

组件

<template>
<!--<post-form/>-->
    <div class="wrapper">
        <b-table :data="posts">
            <template slot-scope="props">
                <b-table-column field="completed" label="complete">
                    <b-checkbox 
                      v-model="props.row.done">
                    </b-checkbox>
                </b-table-column>
            </template>
        </b-table>
    </div>
</template>

我有一张带桌子的b桌子。我想从当前组件中导入<post-form />组件。

但是，当我将组件插入所需的位置时，会发生错误。

<div class="wrapping">如果在其下放置组件，则表将损坏。

我该如何解决？

Answer 1

也许您正在使用Vue3，而eslint配置仍然是vue 2。

尝试编辑您的.eslintrc.json或类似的内容：

{
  // ...
  "extends": ["eslint:recommended", "plugin:vue/vue3-essential"],
  // ...
}

在此处查看参考：eslint-plugin-vue/#usage

Answer 2

模板中只能有一个根元素。因此，如果您想与div一起用作类包装器的兄弟，则需要将它们都包装到父div中，如下所示：

<template>
  <div>
    <post-form/>
    <div class="wrapper">
        <b-table :data="posts">
            <template slot-scope="props">
                <b-table-column field="completed" label="complete">
                    <b-checkbox 
                      v-model="props.row.done">
                    </b-checkbox>
                </b-table-column>
            </template>
        </b-table>
    </div>
  </div>
</template>

Vue错误：“模板根仅需要一个元素”

2 个答案: