Vue how to add element to v-for loop-CodePudding

In my vue-app I want to add an element inside a v-for-loop. So I tried to do this:

<li v-for="(slide, index) in slides" :key="index"
  :class="slideIndex === index ? 'active' : ''"
  @click="slideIndex = index"
>
 {{ slide.nodeName }}
</li>
<li class="cursor-pointer item" v-if="slides.length === 5">foobar</li>

but this doesn't keep the "new" item inside the index e.g. I want the element to be inside the loop.

How can I solve that?

CodePudding user response：

To include elements to the loop of other elements in vue.js, you need to include them into their tag. In your case you need to be aware of, that nesting <li> into <li> can cause problems. Try this:

<li v-for="(slide, index) in slides" :key="index"
  :class="slideIndex === index ? 'active' : ''"
  @click="slideIndex = index"
>
 {{ slide.nodeName }}
  <ul v-if="slides.length === 5">
    <li class="cursor-pointer item">foobar</li>
  </ul>
</li>

As the loop is on your first <li> element, everything between <li> and </li> of that element will be included into the loop. I added an <ul> around your second <li> for the nested list.

EDIT: Render second <li> if 5 slides in slides

So now that I think to know what you trying to achieve, let´s try to solve it. The second <li> has to be rendered after 5 loops done/if there are 5 slides in slides.

First you need to note, that v-if="slides.length === 5" only matches, if there are exactly 5 slides. So if you now provide something with a slides.length bigger than 5 or smaller, your <li> with foobar don´t show. Change it to v-if="slides.length > 5" instead. If <li> with foobar only should be shown if the length IS 5, then your code is working as it should.

But if you try to add <li> with foobar AFTER 5 items or even every 5 items, you could use this little trick:

<ul>
   <span v-for="(slide, index) in slides" :key="index">
      <li :class="slideIndex === index ? 'active' : ''"
         @click="slideIndex = index"
      >
         {{ slide.nodeName }}
      </li>
      <li class="cursor-pointer item" v-if="(index   1)%5 === 0">foobar</li>
   </span>
</ul>

You shouldn´t include <span> in <ul>, but it should work. Now the loop runs for both <li> elements, but <li> with foobar only renders after each 5th element, due to v-if="(index 1)%5 === 0".

Hope this helped you.

CodePudding user response：

Do you mean that if slides.length === 5, then add your second <li> tag after each <li> tag? If yes, please take a look at the following code

<template v-for="(slide, index) in slides">
  <li
    :key="slide.nodeName"
    :class="slideIndex === index ? 'active' : ''"
    @click="slideIndex = index"
  >
    {{ slide.nodeName }}
  </li>
  <li
    :key="`${slide.nodeName}_${index}`"
    class="cursor-pointer item"
    v-if="slides.length === 5"
  >
    foobar
  </li>
</template>

Please pay attention to the key value binding of the <li> tag at the same level

CodePudding user response：

<el-row v-for="item in queryFolderList" :key="item.id">
  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
    <el-button-group>
      <el-button type="primary" size="mini" @click="goToDetil(item.id)"
        >{{ item.id }}</el-button
      >
      <el-button type="warning" size="mini" @click="submit(item.id)"
        >{{ item.name}}</el-button
      >
    </el-button-group>
  </el-col>