I got this error message:
[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue.
How do I fix it please?
You probably have something like this
<template>
<div>...</div>
<div>...</div>
</template>
change it into that
<template>
<div>
<div>...</div>
<div>...</div>
</div>
</template>
As explained here: https://eslint.vuejs.org/rules/no-multiple-template-root.html
Related
I'm trying to set up vue-router; in my top-level App.vue, I have
<template>
<div>
App.vue: hello,
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<router-view></router-view>
</div>
</template>
and it works fine.
I'd like to include these links in a component, but that gives me an error
"Failed to resolve component: router-link"
Any pointers to where I should look for an answer? I've read the API documentation but it doesn't make any reference to any file or import needed in my component file. TIA
I just got started to Vue and i'm trying to understand some basic concepts such as conditional rendering and how to pass data from where i load the app to a component. Suppose i'm rendering a Vue component like this:
<div id="app">
<myComponent></myComponent>
</div>
Suppose myComponent looks like this:
<template>
<div>
<h1>First block</h1>
</h1>Second block</h1>
</div>
</template>
I want to be able to render First block or Second block when i load the Vue app according to a parameter i pass to the component, like:
<div id="app">
<myComponent id="first"></myComponent>
</div>
In this case i should see First block, whereas if instead of id="first" there was id="second" the output was supposed to be Second block. How can i do this?
I know it's a very basic question, but most of the sources i found explained how to do the opposite. Any kind of advice is appreciated!
In vue you could pass props (parameters) to component which defines this ones in its script like :
<template>
<div>
<h1 v-if="block==='first'">First block</h1>
</h1 v-else>Second block</h1>
</div>
</template>
<script>
export default{
props:{
block:{
type:String,
default:'first'
}
}
}
</script>
in parent component pass the prop like :
<div id="app">
<myComponent block="first"></myComponent>
</div>
or
<div id="app">
<myComponent block="second"></myComponent>
</div>
I am new to VueJS, when I try to compile this code it works fine:
<template>
<div id="users-table">
<ServerTable url="users" :columns="columns" :options="options"></ServerTable>
</div>
</template>
However when I add another tag (any tag) like that:
<template>
<h1>Header</h1>
<div id="users-table">
<ServerTable url="users" :columns="columns" :options="options"></ServerTable>
</div>
</template>
I am getting an error
Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
RangeError: Invalid string length
at repeat$1
What am I doing wrong?
Just put the whole content in a single root element.
<template>
<div>
<h1>Header</h1>
<div id="users-table">
<ServerTable url="users" :columns="columns" :options="options"></ServerTable>
</div>
</div>
</template>
So I currently have a template sitting in a ".vue" file like so:
<template>
<div id="dataAttachToMe"></div>
</template>
I don't want this to load, unless a user clicks a button, something like
<button #click="loadTheTemplateAbove">See Data</button>
I've tried using this example:https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key. But it says something like "Component template should contain exactly one root element" in the error message.
I need more than a show/hide here I think, something that can initiate the template dynamically.
<template>
<div id="data">
<button #click="loadTemplate">Load the template</button>
<div v-if="buttonClicked">
<div id="dataAttachedToThisDiv"></div>
</div>
</div>
</template>
The error you are getting, means that there is more than one root element inside <template></template> tag.
It is required in Vue.js (and other template based frameworks/libraries) to have only one root element.
This will NOT work:
<template>
<div id="dataAttachToMe"></div>
<button #click="loadTheTemplateAbove">See Data</button>
</template>
This will work:
<template>
<div id="someRootDiv">
<div id="dataAttachToMe">Some data</div>
<button #click="loadTheTemplateAbove">See Data</button>
</div>
</template>
Here is a code example (App.vue) of what you are trying to achieve:
Basic idea: we have to create a variable, that will be changed upon button click. We add v-if directive that depends on that variable and will handle element's visibility.
Welcome to StackOverflow. When you get the error Component template should contain exactly one root element it means that you can only have one root element in your template. You can fix that error by wrapping everything in a blank div like so
<template>
<div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</div>
</template>
Please edit your post and place you <script> tag. Conditional Rendering requires a data field of a boolean that you can place in your if statement on your template
<template>
<div>
<div v-if="show">{{message}}</div>
<div v-if="#show">Not Showing when show is set to false</div>
<button v-on:click="show = true">Show</button>
</div>
</template>
<script>
module.exports {
data: function () {
message: 'Hello Vue!',
show: false
}
}
</script>
I get the bellow error when I run my vue project:
./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-003cf1bf","hasScoped":true,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/iview-loader??ref--0-1!./src/components/common/path-nav.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<div class="path-nav">
<i-breadcrumb>
<i-breadcrumb-item v-for="route in route_list" to="{{route.route}}">{{ route.name }}</i-breadcrumb-item>
</i-breadcrumb>
</div>
my key code is bellow:
<template>
<div class="path-nav">
<i-breadcrumb>
<i-breadcrumb-item v-for="route in route_list" to="{{route.route}}">{{ route.name }}</i-breadcrumb-item>
</i-breadcrumb>
</div>
</template>
If I comment the:
<i-breadcrumb-item v-for="route in route_list" to="{{route.route}}">{{ route.name }}</i-breadcrumb-item>
There I will not get this error.
The
to="{{route.route}}"
has been deprecated and removed in Vue.js2
you can use
:to="route.route"