3

I'm building a page where the user can expend categories like an accordion. I've been helped so far and I'm still trying to dismiss the fog here. I'm having this issue with my slots :

'v-slot' directive must be owned by a custom element, but 'div' is not.

I've been checking the doc, but I can't seem to understand much...

<div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey" class="l">
      <Item>
        <template #title>
          <a> {{ categoryKey }} </a>
        </template>
        <div v-for="article in filteredArticles" :key="article.slug">
          <template #content> <!-- here is the issue -->
            <p> bonjour monde</p>
            <img :src="require(`assets/${article.img}`)" alt="">
          </template>
        </div>
      </Item>
    </div>

I've nested the template #content inside a div in order to dynamically fetch from an array.

Here is Item.vue

<template>
  <div class="wrapper">
    <div
      :class="{ active: isActive }"
      @click="toggle"
    >
      <a class="title">
        <slot name="title" />
      </a>

      <div v-show="show" :class="{ active: isActive }" class="content">
        <slot name="content" />
      </div>
    </div>
  </div>
</template>
Aurore
  • 696
  • 4
  • 16
  • Try to add a `/` in the img tag ; `````` it might confuse the compiler – Lk77 Aug 22 '22 at 08:38
  • 1
    The issue is probably because `template` is the root element to be looped on in this case, usually you loop on a component. Also, it seems to be quite a strange use-case to only loop on specific parts of the slot. I'll pass the collection to the component and let it handle that for you, or get the loop on the upper scope before looping. Still, `Item` being 2 slots, looped in 2 different `v-for` is probably not the way to go here. So, even if you bypass this error I do not recommend such pattern because it's not meant to be used like that (IMO) + cognitive load to debug that one afterwards. – kissu Aug 22 '22 at 08:47
  • You should move the `v-for` either to the `Item.vue` or change the logic. Each template for slot should appear only once inside a component. – Mat J Aug 22 '22 at 08:53
  • 1
    Also, creating 2 components is also totally viable/feasible and probably the best approach here. – kissu Aug 22 '22 at 08:57
  • you mean, one component for the title, another one with the content ? – Aurore Aug 22 '22 at 08:57
  • Usually, sticking to a component per `v-for` is not a bad idea. Of course it depends but in your situation and regarding what you're trying to achieve in the broader scope, it's probably a nice idea. Still, it all comes down to your own preference and how you want to organize your project. Too opinion-based to say. The structure given in [this answer](https://stackoverflow.com/a/73437532/8816585) is not okay? – kissu Aug 22 '22 at 09:03

0 Answers0