Print element after component at some point when iterating through array in Vue.js-CodePudding

I have an array and i'm looping through it and printing a component in every iteration. I want to print a html element AFTER the third component printed and i'm only able to print it INSIDE the component...


<div >
            <component
                :is="item.component"
                v-for="(item, i) in items"
                :index="i"
                :key="item.id"
                :image="item.image"
                :to="item.to"
                :image-secondary="item.imageSecondary"
                :title="item.title"
                :date="item.date"
                :talent="item.talent"
                :excerpt="item.excerpt"
                
            />
            <p v-if="i === 2">PRINTED AFTER 3RD COMPONENT</p>
        </div>

(I know the p tag above is outside the loop, but i dont know how to include it inside the loop but outside the component)

I've tried to wrap the p> tag inside the but (obviusly) it prints the <p inside the 3rd component, and that's what i don't need. I need it after it.

I thought maybe the only solution is to make a dettach and attach with JS but I find it very ugly and bad practice

My idea, in PHP would be something like:

if($items){
$count = 0;
 foreach($items as $item){
  echo $item;
  if($count == 2){
   echo '<p>some text</p>';
  }
  $count  ;
}

That's the idea

Thanks

CodePudding user response：

Your p tag is outside the v-for loop. See documentation about v-for.

Notice how we move the v-for to include both elements, this guarantees that the p tag receives i.

<div >
  <template v-for="(item, i) in items" :key="item.id">
     <component
       :is="item.component"
       :index="i"
       :image="item.image"
       :to="item.to"
       :image-secondary="item.imageSecondary"
       :title="item.title"
       :date="item.date"
       :talent="item.talent"
       :excerpt="item.excerpt"
       
     />
     <p v-if="i === 2">PRINTED AFTER 3RD COMPONENT</p>
  </template>
</div>

CodePudding user response：

As written in the documentation-

"Similar to template v-if, you can also use a <template> tag with v-for to render a block of multiple elements."

On another note, If you are using Vue.js 2.x, a template cannot be keyed, so, You need to key every child accordingly.

<div >
    <template v-for="(item, i) in items">
        <component
            :key="'component'   i"
            :is="item.component"
            :index="i"
            :image="item.image"
            :to="item.to"
            :image-secondary="item.imageSecondary"
            :title="item.title"
            :date="item.date"
            :talent="item.talent"
            :excerpt="item.excerpt"
            
        />
        <p v-if="i === 2" :key="'paragraph'   i">PRINTED AFTER 3RD COMPONENT</p>
    </template>
</div>

But if you are using Vue.js 3.x, with the support for fragments, the <template v-for> key can be placed on the <template> tag.

<div >
    <template v-for="(item, i) in items" :key="i">
        <component
            :is="item.component"
            :index="i"
            :image="item.image"
            :to="item.to"
            :image-secondary="item.imageSecondary"
            :title="item.title"
            :date="item.date"
            :talent="item.talent"
            :excerpt="item.excerpt"
            
        />
        <p v-if="i === 2">PRINTED AFTER 3RD COMPONENT</p>
    </template>
</div>

for more information, read here- https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for