v-for loops counter without .lenght property

[jiri-jiri]

Hi, is there a simple way to count loops (like in plain javascript) in v-for without using array.lenght property or filter() method? Would be nice to count specific items selected via v-if within nested v-for. Searching a lot but no answer so far. Thanks for any advice.

[hubdidub]

It's hard to understand what you are asking..
Are you perhaps looking for this?

<script setup>
import { ref } from 'vue';

const array = ref(['a', 'b', 'c', 'd', 'e', 'f']);

</script>


<template>
  <div v-for="(item, i) in array">
    {{ i }}: {{ item }}
    <span v-if="i === 3">!!!</span> 
  </div>
</template>

[jiri-jiri]

Hi, thanks for your effort, but it is not really what I am looking for. I would like something basic, just like a counter in plain javascript:

let counter = 0
['a', 'b', 'c'].forEach(item => counter++)
console.log(counter)

Jiri

[hubdidub]

But in this syntax: v-for="(item, i) in array", isn't the i variable already like a counter?

Could you give a more precise example of what you are trying to do? Because In the example above, you might as well use .length

[hubdidub]

Ah, I think I get it now. You have some v-if condition inside a loop and you want to count how many times it got rendered. Right?

[jiri-jiri]

... it would be nice and obvious to use the index of "v-for" as a counter, but is there a way how to get it after the last loop without using .length? I spend a lot of time to find a solution on the internet and haven't find any so far. I do not believe, that such a basic feature of javascript (and used a lot in many situations) is not possible in vue. I will paste the code here for better illustration why am I looking for it later on ...

[jiri-jiri]

Ah, I think I get it now. You have some v-if condition inside a loop and you want to count how many times it got rendered. Right?

Exactly

[hubdidub]

Maybe like this:

<script setup>
import { onBeforeUpdate } from 'vue';
import { ref } from 'vue'

const array = ref([1, 2, 3, 4, 5, 6, 7]);

let count = 0;
onBeforeUpdate(() => {
  count = 0;
});

function checkCondition(item) {
  if (item % 2 === 0) {
    count++;
    return true;
  }
  return false;
}
</script>

<template>
  <div v-for="item in array">
    {{ item }}
    <span v-if="checkCondition(item)">
      yes
    </span>
  </div>
  Total: {{ count }}
</template>

Things to note:

• you can't use ref or reactive for the counter because it would trigger an endless update-loop
• you need to reset the counter in onBeforeUpdate or else you will run into re-rendering issues

But it's not very pretty. I would not recommend doing that and instead I would definitely recommend to determine the total count in the script section and not by how often something was rendered in the template section.

[jiri-jiri]

Maybe like this:

<script setup>
import { onBeforeUpdate } from 'vue';
import { ref } from 'vue'

const array = ref([1, 2, 3, 4, 5, 6, 7]);

let count = 0;
onBeforeUpdate(() => {
  count = 0;
});

function checkCondition(item) {
  if (item % 2 === 0) {
    count++;
    return true;
  }
  return false;
}
</script>

<template>
  <div v-for="item in array">
    {{ item }}
    <span v-if="checkCondition(item)">
      yes
    </span>
  </div>
  Total: {{ count }}
</template>

Things to note:

• you can't use ref or reactive for the counter because it would trigger an endless update-loop
• you need to reset the counter in onBeforeUpdate or else you will run into re-rendering issues

But it's not very pretty. I would not recommend doing that and instead I would definitely recommend to determine the total count in the script section and not by how often something was rendered in the template section.

Thanks for it, but it is another painful and expensive "work around" which I have seen a lot when going through different topics of vue. I have just started to learn vue, and supposed it will simplify my work comparing to plain javascript. But so far, I miss simple javascript solutions and see many problems ... eg. v-show does not work as supposed, props/emits flow brings unexpected limitations, defineModel() on objects is complicated etc. ... did many huge projects in javascript/firebase and wanted to move further ... but so far the only pro of vue I can see is in creating and updating elemets and their values, maybe cleaner code structure ... but on the other hand ... all the imports, exports, defaults, returns, setups, defines, datas, .values all the time … are really very annoying ... plus the issues like this one with the loop counter ... but maybe it is just my beginner feelings and I will se the real potencial of vue soon :)

[hubdidub]

I know what you mean, it takes some getting used to it. I'm sure if you keep on using Vue, it will grow on you, it's a really great framework.

[jiri-jiri]

OK, thanks a lot for your effort anyway ....

[jiri-jiri]

... you see, nobody answered even my question about editing data (provided from PARENT to CHILD) inside CHILD element and emiting them back to parent if they are not primitives but rather complex in form of an object. And I guess, huge projects do not work with primitives. So the databases are not asking to change their structure often. What is all reactivity advantages of vue for if it is hard to change data in a simple way. And this definModel() is quite new feature, so I really can not imagine how you were working without it before. To be limited by props and emits flow!!! It is in against the idea of making components for everything. Then, you can see desperate attempts and solutions on the net trying to walkaround the vue philosophy propsDOWN/emitsUP just because they needed flexibility in editing, updating and changing data. And the prove of my complain is that Vue people realized this problem of sharing data between components and invented defineModel(). Data sharing was problem not only between parent/child but also between all components. State management without Pinia or Vuex had to be a disaster and a hell. So, on one side, I can see the reactivity advantage of vue. But the question is. If you are limited on updating values, is this advantage really worth comparing to vanilla javascript simplicity and flexibility? And the same with this example of simple counter here. You really do not miss these simple javascript solutions? I could go on ... in javascript I can create much simplier and flexible toast, loaders, modals …

[hubdidub]

I don't want to drift off too far from the original question. All I'm going to say is: Frameworks exist for a reason and it's impossible for a framework to allow you to do just anything, like setting up scoped counter variables in v-for-loops. Even if it did, it wouldn't even work if you want to display the count before looping through the elements like shown in the screenshot.
I really doubt it would be simpler in vanilla JS... with Vue, what you want to do is absolutely doable, just maybe not the way you imagine it