I have this Vue code:

var itembox = new Vue({
    el: '#itembox',
    data: {
        items: {
            cookiesncreme: {
                name: "Cookies N Cream",
                description: "description"
            },
            chocolateswirl: {
                name: "Chocolate Swirl",
                description: "description"
            },
            peanutbutter: {
                name: "Peanut Butter",
                description: "description"
            }
        }
    }
});

And this HTML code:

<div id="itembox">
    <div v-for="(item, index) in items">{{ index }} - "{{ item.name }}"</div>
</div>

I am trying to output the code in a numbered list, for example:

<div>1 - Cookies N Creme</div>
<div>2 - Chocolate Swirl</div>
<div>3 - Peanut Butter</div>

But since my items have keys already, it es out like this:

<div>cookiesncreme - Cookies N Creme</div>
<div>chocolateswirl - Chocolate Swirl</div>
<div>peanutbutter - Peanut Butter</div>

Is there any other way to get a number count for each item? Thanks!!

I have this Vue code:

var itembox = new Vue({
    el: '#itembox',
    data: {
        items: {
            cookiesncreme: {
                name: "Cookies N Cream",
                description: "description"
            },
            chocolateswirl: {
                name: "Chocolate Swirl",
                description: "description"
            },
            peanutbutter: {
                name: "Peanut Butter",
                description: "description"
            }
        }
    }
});

And this HTML code:

<div id="itembox">
    <div v-for="(item, index) in items">{{ index }} - "{{ item.name }}"</div>
</div>

I am trying to output the code in a numbered list, for example:

<div>1 - Cookies N Creme</div>
<div>2 - Chocolate Swirl</div>
<div>3 - Peanut Butter</div>

But since my items have keys already, it es out like this:

<div>cookiesncreme - Cookies N Creme</div>
<div>chocolateswirl - Chocolate Swirl</div>
<div>peanutbutter - Peanut Butter</div>

Is there any other way to get a number count for each item? Thanks!!

• javascript
• oop
• vue.js

• If you want to create a numbered list, would it work in your case to just use <ol> instead of <div>? – Chris Riebschlager Commented Jun 29, 2017 at 14:28
• Its more plicated than that, I just tried to simplify it for the question. – supercoolville Commented Jun 29, 2017 at 14:35

2 Answers 2

In Vue.js, there's actually a third parameter that you can pass in this case. For example, you could do this:

<div id="itembox">
    <div v-for="(item, index, i) in items">{{ i+1 }} - {{ index }} - "{{ item.name }}"</div>
</div>

Notice how I used the i parameter, which is actually the index number. I've created a working Fiddle of this here. If you would like to learn more about Vue.js, I hope you'll checkout my Vue.js training course. If this answer helped, I hope you'll mark it as such and vote this item up.

Accourding to the documentation Vue API: v-for

Alternatively, you can also specify an alias for the index (or the key if used on an Object):

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>