Vue: 템플릿 루트에서 v-for directive를 허용하지 않음

Vue: 템플릿 루트에서 v-for directive를 허용하지 않음

간단한 포스트 리스트 컴포넌트를 작성하려고 합니다.이 컴포넌트에서v-fordirective. 단, 다음 오류가 나타납니다.

"eslint-eslint: the template root disallows v-for directives"

각 포스트를 루프하고 렌더링하려면 어떻게 해야 합니까?

지나갑니다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>

Vue 2에서는 각 컴포넌트에 포함할 수 있는 루트 요소는 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>

Vue 2 데모

Vue 3은 여러 루트 노드를 허용하므로 구성 요소 템플릿이 해당 노드에서 작동합니다.

이 오류는 이전에 발생했는데, 문제는 템플릿 루트에서 '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>

언급URL : https://stackoverflow.com/questions/52892093/vue-the-template-root-disallows-v-for-directives