In my Vue code snippet below:
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 here is the corresponding HTML code:
<div id="itembox">
<div v-for="(item, index) in items">{{ index }} - "{{ item.name }}"</div>
</div>
I am aiming to display the items in a numbered list format, like shown below:
<div>1 - Cookies N Creme</div>
<div>2 - Chocolate Swirl</div>
<div>3 - Peanut Butter</div>
However, the current output displays the items with their keys instead of numbers, as seen here:
<div>cookiesncreme - Cookies N Creme</div>
<div>chocolateswirl - Chocolate Swirl</div>
<div>peanutbutter - Peanut Butter</div>
Do you have any suggestions for achieving a numbered count for each item? Thank you in advance!