Question

这是我使用vue框架的第一步，我正在尝试制作一个简单的帖子列表组件，在其中使用v-for指令，但是却收到以下消息：

“ eslint-eslint：模板根禁止使用v-for指令”

那我应该如何循环渲染每个帖子？

我正在将laravel后端的allBehaviourPosts作为组件传递给组件，如下所示：

<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

每个组件只能包含single root element，在根元素上排除conditional rendering或list rendering。您必须将列表包装在另一个元素（例如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 template literals）：

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

demo

Answer 2

有时我会收到此错误，问题是模板根目录不允许'v-for'指令。在模板中使用指令的解决方案是，您需要提供一个根div来包含具有指令的元素。就我而言，这是可行的。在此处查看更多信息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>

Vue：模板根禁止使用v-for指令

2 个答案: