Hey guys I have a problem with my code. I have one main component where I have different sub components like this:
<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>
The v-if is because i only want to render one component in the frontend step by step. So when I start my application, I only show the first component, when I click on next, I show the second component and so on.
Now I want a page indicator, so I have to count the child div tags of "container". For that I already tried these options:
var count = $("#container div").length; //returns 0
var count2 = $("#container").children().length; //returns 2
That results are false because the real result would be 4 because there are 4 children div. I think the problem is, that the other components are not all rendered but how can I solve this problem?
Given that you're using Vue, I would use a counter in your data object to keep track of where you are, then just increment it when you click a button to proceed to the next step:
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>Checked the same, but it seems working for me.
Probably you need to check the length after the document is ready. I mean in the mounted lifecycle method.
But using jQuery inside another library is not a better way of doing it unless there is no alternative.
So in this case, you can use native JS to find the number of div's inside the container.
$(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>