v-forディレクティブを使用する単純な投稿リストコンポーネントを作成しようとしていますが、次のエラーが表示されます。
"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>
各コンポーネントに含めることができるルート要素は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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加