En mi vue
-app, quiero agregar un elemento dentro de un v-for
loop. Así que traté de hacer esto:
<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>
pero esto no mantiene el elemento "nuevo" dentro del índice, por ejemplo, quiero que el elemento esté dentro del ciclo.
¿Cómo puedo solucionar eso?
¿Quiere decir que si slides.length === 5, agregue su segunda etiqueta <li>
después de cada etiqueta <li>
? En caso afirmativo, eche un vistazo al siguiente código
<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>
Preste atención al enlace de valor clave de la etiqueta <li>
en el mismo nivel
Para incluir elementos en el ciclo de otros elementos en vue.js
, debe incluirlos en su etiqueta. En su caso, debe tener en cuenta que anidar <li>
en <li>
puede causar problemas. Prueba esto:
<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>
Como el ciclo está en su primer elemento <li>
, todo lo que se encuentre entre <li>
y </li>
de ese elemento se incluirá en el ciclo. Agregué un <ul>
alrededor de su segundo <li>
para la lista anidada.
EDITAR: renderizar el segundo <li>
si hay 5 diapositivas en slides
Así que ahora que pienso saber lo que estás tratando de lograr, intentemos resolverlo. El segundo <li>
tiene que renderizarse después de 5 bucles hechos/si hay 5 diapositivas en slides
.
Primero debe tener en cuenta que v-if="slides.length === 5"
solo coincide si hay exactamente 5 diapositivas. Entonces, si ahora proporciona algo con una longitud de slides.length
mayor que 5 o menor, su <li>
con foobar
no se mostrará. Cámbielo a v-if="slides.length > 5"
en su lugar. Si <li>
con foobar
solo debe mostrarse si la length
ES 5, entonces su código está funcionando como debería.
Pero si intenta agregar <li>
con foobar
DESPUÉS de 5 elementos o incluso cada 5 elementos, podría usar este pequeño truco:
<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>
No debe incluir <span>
en <ul>
, pero debería funcionar. Ahora el bucle se ejecuta para ambos elementos <li>
, pero <li>
con foobar
solo se muestra después de cada quinto elemento, debido a v-if="(index + 1)%5 === 0"
.
Espero que esto te haya ayudado.
<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>