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>