Vue: корень шаблона запрещает директивы v-for

Question

Итак, это мои первые шаги с vue framework, я пытаюсь создать простой компонент списка сообщений, в котором я использую директиву v-for, однако я получаю следующее сообщение:

"eslint-eslint: корень шаблона запрещает директивы v-for "

Тогда как я должен зацикливаться и отображать каждое сообщение?

Я передаю allBehaviourPosts компоненту из внутреннего интерфейса laravel в качестве подпорки, вот так:

<related-post-list :relatedBehaviourPost= {{ $relatedBehaviourPosts }}></>

<template>
<div class="sidebar_related_content_container" v-for="behaviour in relatedBehaviourPosts " :key="behaviour.id" style="">
	<a class="sidebar_related_content_image" href="/conducta-canina/{{ relatedBehaviour.slug }}"  style="background-image:url('{{ behaviour.image }}');">
		<div class="black_gradient" style=""></div>
	</a>
	<div class="sidebar_related_content_text_container" style="">
		<span class="sidebar_related_content_text_title" style="">{{ behaviour.postcategory.name }}</span>
		<span class="sidebar_related_content_text_description" style="">{{ behaviour.title }}</span>
	</div>
</div>
</template>
<!--SCRIPTS-->
<script>
    export default {

		props: ['relatedBehaviourPosts'],

        data: function () {
            return {
                //data
            }
        },

        mounted() {
            console.log('Footer mounted.')
        }
    }
</script>
<!--STYLES-->
<style scoped>

</style>

Answer 1

Каждый компонент может содержать только единственный корневой элемент , что исключает условное отображение или отображение списка в корневом элементе.Вы должны будете обернуть свой список в другой элемент (например, div), сделав его корнем:

<template>
  <div> <!-- single root element here -->

    <div v-for="behaviour in relatedBehaviourPosts " :key="behaviour.id">
      <!-- ... -->
    </div>

  </div>
</template>

Также обратите внимание, что Vue 2 не поддерживает интерполяцию строк в привязках атрибутов, поэтому они будут иметьдолжен быть заменен привязками данных этого синтаксиса:

:ATTRIBUTE_NAME="VALUE"

В частности, замените это:

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

на это (используя литералы шаблона ES2015 ):

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

или с этим (с использованием конкатенации строк):

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

демо