Vue: the template root disallows v-for directives

In Vue 2, each component can only contain a single root element, which precludes conditional rendering or list rendering on the root element. You would have to wrap your list in another element (e.g., a div), making that the root:

<template>  <div> <!-- single root element here -->    <div v-for="behaviour in relatedBehaviourPosts " :key="behaviour.id">      <!-- ... -->    </div>  </div></template>

Also note Vue 2 does not support string interpolation in attribute bindings, so those would have to be replaced with data bindings of this syntax:

:ATTRIBUTE_NAME="VALUE"

In particular, replace this:

<a href="/conducta-canina/{{ behaviour.slug }}"   style="background-image:url('{{ behaviour.image }}');"></a> <!-- DON'T DO THIS -->

with this (using ES2015 template literals):

<a :href="`/conducta-canina/${behaviour.slug}`"   :style="`background-image:url('${behaviour.image}');`"></a>

or with this (using string concatenation):

<a :href="'/conducta-canina/' + behaviour.slug"   :style="'background-image:url(\'' + behaviour.image + '\');'"></a>

Vue 2 demo

Note that Vue 3 allows multiple root nodes, so your component template would work there.

I got this error sometimes ago, the problem is that the template root does not allow 'v-for' directives. The solution to use directives in a template is, you need to provide a root div to contain the element that has your directives.This worked in my case. Check here for more info https://eslint.vuejs.org/rules/valid-template-root.html

<template><!-- place a root element --><div> <div v-for='item in menu'>some items</div></div></template>