CODEWITHSUNDEEP
htmlvue.js
COLEAN
COLEAN

Reputation: 695

Vue Error: "the template root requires exactly one element"

I have the following components

component

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

I have a b-table with buefy. And I want to import the <post-form /> component from the current component.

However, when I insert the component in the desired location, an error occurs.

<div class="wrapping"> If I place a component under it, my table is broken.

How can I solve this?

Upvotes: 2

Views: 14189

Answers (2)

Sheldon
Sheldon

Reputation: 611

Maybe you are using Vue3, while you eslint config is still vue 2.

Try to edit your .eslintrc.json or something like this:

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

Check out reference here: eslint-plugin-vue/#usage

Upvotes: 9

Anuradha Kumari
Anuradha Kumari

Reputation: 703

We can only have one root element in the template. So, if you want to use as a sibling of div with class wrapper, you need to wrap both of these to a parent div, as below:

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

Upvotes: 3

Related Questions