Vue: the template root disallows v-for directives

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>

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.