Hola chicos, tengo un problema con mi código. Tengo un componente principal donde tengo diferentes subcomponentes como este:
<template> <div id="container"> <div v-if=condition> Component1 </div> <div v-if=condition> Component2 </div> <div v-if=condition> Component3 </div> <div v-if=condition> Component 4 </div> </div> </template>El v-if es porque solo quiero renderizar un componente en la interfaz paso a paso. Entonces, cuando inicio mi aplicación, solo muestro el primer componente, cuando hago clic en siguiente, muestro el segundo componente y así sucesivamente.
Ahora quiero un indicador de página, así que tengo que contar las etiquetas div secundarias de "contenedor". Para eso ya probé estas opciones:
var count = $("#container div").length; //devuelve 0
var count2 = $("#container").children().length; //devuelve 2
Esos resultados son falsos porque el resultado real sería 4 porque hay 4 niños div. Creo que el problema es que los otros componentes no están todos renderizados, pero ¿cómo puedo resolver este problema?
Dado que está usando Vue, usaría un contador en su objeto de datos para realizar un seguimiento de dónde se encuentra, luego simplemente incremente cuando haga clic en un botón para continuar con el siguiente paso:
new Vue({ el: "#app", data: { currentStep: 1 }, methods: { increaseStep() { if (this.currentStep > 4) { return; } this.currentStep++; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="container"> <div v-if="currentStep >= 1">Step 1</div> <div v-if="currentStep >= 2">Step 2</div> <div v-if="currentStep >= 3">Step 3</div> <div v-if="currentStep >= 4">Step 4</div> <button v-on:click="increaseStep">Next step</button> </div> </div> var count = $("#container div").length; document.write(count); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="container"> <div v-if=condition> Component1 </div> <div v-if=condition> Component2 </div> <div v-if=condition> Component3 </div> <div v-if=condition> Component 4 </div> </div>Comprobado lo mismo, pero parece funcionar para mí.
Probablemente necesite verificar la longitud una vez que el documento esté listo. Me refiero al método del ciclo de vida mounted .
Pero usar jQuery dentro de otra biblioteca no es una mejor manera de hacerlo a menos que no haya otra alternativa.
Entonces, en este caso, puede usar JS nativo para encontrar la cantidad de div dentro del contenedor.
$(document).ready(function(){ console.log($("#container div").length); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div v-if=condition> Component1 </div> <div v-if=condition> Component2 </div> <div v-if=condition> Component3 </div> <div v-if=condition> Component 4 </div> </div>