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

[vitorrd]

@jiri-jiri You can mark each of your v-if items inside your v-for with a ref like const myRefs = ref([]), such that your item would be e.g. <div v-if="condition" ref="myRefs" />, and use myRefs.length to retrieve the rendered count.

[jiri-jiri]

Hi, thanks for your answer. The issue is, that it will count the number of kids/adults for all rooms. As @hubdidub wrote, there has to be some kind of setting to initial null of the ref after each loop and also a way to put the "loop count" to another ref to keep it written for each room. Which is quite a lot work for such an issue. The best option is to map().filter() the data before v-for looping. I have been starting to understand that the reactivity is key point in vue. And it requires quite a different approach in thing comparing to vanila javascript. And also much more practice and learning ...

[jiri-jiri]

In javascript I would use, similar to your approach:

e.g. getElementById('room).querySelectorAll('.adults').lenght

[vitorrd]

You're correct. The correct approach is to map your data and use it accordingly, and it does require a different mindset in that instance.

[jiri-jiri]

Yes, but thanks for your effort anyway ...

[babu88-az]

Yes, you can count loops or specific items in Vue's v-for directive without relying on array.length or filter() by maintaining a counter directly in your template or in your component's logic. Here are a few approaches depending on your needs:

---

1. Using a Counter in the Template

If you want to count specific items that match a condition, you can use a counter variable directly in your template with v-if. For example:

<template>
  <div>
    <p v-for="(item, index) in items" :key="index">
      <span v-if="item.condition">{{ incrementCount() }}</span>
      {{ item.name }}
    </p>
    <p>Total Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "Item 1", condition: true },
        { name: "Item 2", condition: false },
        { name: "Item 3", condition: true },
      ],
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
      return this.count;
    },
  },
  watch: {
    items: {
      handler() {
        this.count = 0; // Reset count when items change
      },
      deep: true,
    },
  },
};
</script>

---

2. Using a Computed Property

A cleaner approach would be to calculate the count using a computed property. This avoids the need to call a method during rendering and keeps your data reactive.

<template>
  <div>
    <p v-for="(item, index) in items" :key="index">
      <span v-if="item.condition">{{ item.name }}</span>
    </p>
    <p>Total Count: {{ filteredCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "Item 1", condition: true },
        { name: "Item 2", condition: false },
        { name: "Item 3", condition: true },
      ],
    };
  },
  computed: {
    filteredCount() {
      return this.items.reduce((count, item) => {
        return item.condition ? count + 1 : count;
      }, 0);
    },
  },
};
</script>

---

3. Nested v-for with Conditional Count

If you have nested v-for loops and want to count specific items based on a condition in the nested loop:

<template>
  <div>
    <div v-for="(group, groupIndex) in groups" :key="groupIndex">
      <h3>Group {{ groupIndex + 1 }}</h3>
      <ul>
        <li
          v-for="(item, itemIndex) in group.items"
          :key="itemIndex"
          v-if="item.condition"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <p>Total Count: {{ totalCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groups: [
        {
          items: [
            { name: "Item 1", condition: true },
            { name: "Item 2", condition: false },
          ],
        },
        {
          items: [
            { name: "Item 3", condition: true },
            { name: "Item 4", condition: true },
          ],
        },
      ],
    };
  },
  computed: {
    totalCount() {
      return this.groups.reduce((groupCount, group) => {
        return (
          groupCount +
          group.items.reduce((itemCount, item) => {
            return item.condition ? itemCount + 1 : itemCount;
          }, 0)
        );
      }, 0);
    },
  },
};
</script>

---

Summary

• Use a method or computed property if you need a reusable and clean way to count items.
• For nested v-for, leverage a reduce approach in your computed properties.
• Avoid side effects like modifying data during rendering, as it can lead to unexpected results.

Let me know if you need further clarification! 😊

[hubdidub]

The first one doesn't work. You can't use and update a reactive variable (count) in the template, it's an endless update loop.
And the counter should be reset in an onBeforeUpdate lifecycle hook, otherwise it might count too much when parts of the component get re-rendered.
Example of that posted above