Jiren
Reputation: 673
Vue v-for how to iterate two dimensional array
I am trying to loop through a two dimensional array in Vue, but I keep getting a Property or method "currentItem" is not defined on the instance but referenced during render error.
I have the following template:
<template>
<div id="cashDeskLeft">
<input type="search" class="myInput" id="searchDishInput" v-model="search" v-on:keydown="searchDish()">
<div id="itemsToSelect">
<div class="menuItemType" v-for="currentItem in menuItems" :key="currentItem"> test </div>
<table class="itemToSelectTable">
<tbody>
<tr v-for="dish in currentItem" :key="dish.menu_number">
<td>
{{ dish.menu_number + "."}}
</td>
<td>
{{ dish.name }}
<i>{{ dish.description }}</i>
</td>
<td>
€ {{number_format(dish.price, 2, ',', ' ')}}
</td>
<td>
<button class="addMenuItem" >Toevoegen</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: "",
menuItems: []
}
},
methods: {
searchDish(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
let placeholder = this.search = "" ? "search" : this.search;
$.post('/zoek/' + placeholder, function(response) {
this.menuItems= response;
return this.menuItems;
});
}
},
mounted() {
this.searchDish();
},
}
</script>
I also don't understand why I need to add a key to my v-for, but if I don't I get a different error. How do I loop over my two dimensional array in Vue?
My array looks something like this:
{
"SOEP":[
{
"id":2,
"menu_number":"2",
"name":"Kippensoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":3,
"menu_number":"3",
"name":"Tomatensoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":4,
"menu_number":"4",
"name":"Haaienvinnensoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":5,
"menu_number":"5",
"name":"Champignonsoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":6,
"menu_number":"6",
"name":"Pekingsoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":7,
"menu_number":"7",
"name":"Wan Tan Soep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":8,
"menu_number":"8",
"name":"Chinese Champignonsoep",
"genre":"SOEP",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
}
],
"VOORGERECHT":[
{
"id":9,
"menu_number":"10",
"name":"Loempia Ling Fa",
"genre":"VOORGERECHT",
"description":"met atjar, ananas en pindasaus",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":10,
"menu_number":"11",
"name":"Loempia Compleet",
"genre":"VOORGERECHT",
"description":"met gesmoord rundvlees en pikante saus",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":11,
"menu_number":"12",
"name":"Loempia met Kip",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":12,
"menu_number":"13",
"name":"Loempia",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":13,
"menu_number":"14",
"name":"Chinese mini loempia",
"genre":"VOORGERECHT",
"description":"4 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":14,
"menu_number":"14A",
"name":"Vegetarische mini loempia",
"genre":"VOORGERECHT",
"description":"12 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":15,
"menu_number":"15",
"name":"Kroepoek",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":16,
"menu_number":"15A",
"name":"Casave Kroepoek",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":17,
"menu_number":"16",
"name":"Pangsit Goreng",
"genre":"VOORGERECHT",
"description":"7 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":18,
"menu_number":"17",
"name":"Pisang Goreng",
"genre":"VOORGERECHT",
"description":"5 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":19,
"menu_number":"18",
"name":"Chinese Dim Sum",
"genre":"VOORGERECHT",
"description":"mini loempia, kerry ko, pangsit goreng, garnalenpasteitje",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":20,
"menu_number":"19",
"name":"Saté Babi",
"genre":"VOORGERECHT",
"description":"4 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":21,
"menu_number":"20",
"name":"Saté Ajam",
"genre":"VOORGERECHT",
"description":"4 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":22,
"menu_number":"20A",
"name":"Saté Garnalen",
"genre":"VOORGERECHT",
"description":"3 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":23,
"menu_number":"21",
"name":"Fong Mei Ha",
"genre":"VOORGERECHT",
"description":"krokant gepaneerd garnalen. 4 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":24,
"menu_number":"22",
"name":"Patat",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":25,
"menu_number":"23",
"name":"Tsa Siu Mai",
"genre":"VOORGERECHT",
"description":"gebakken vleespasteitje. 4 st.",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":26,
"menu_number":"24",
"name":"Atjar",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":27,
"menu_number":"25",
"name":"Witte Rijst",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":28,
"menu_number":"26",
"name":"Grote pindasaus",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":29,
"menu_number":"27",
"name":"Kleine pindasaus",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":30,
"menu_number":"28",
"name":"Kippenpootje",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":31,
"menu_number":"29",
"name":"Halve kip",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":175,
"menu_number":"29B",
"name":"test",
"genre":"VOORGERECHT",
"description":null,
"created_at":"2020-05-17T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":33,
"menu_number":"29G",
"name":"Frikandel",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":32,
"menu_number":"29H",
"name":"Kroket",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
},
{
"id":34,
"menu_number":"180H",
"name":"Kleine Sambal",
"genre":"VOORGERECHT",
"description":"",
"created_at":"-000001-11-30T00:00:00.000000Z",
"updated_at":null,
"deleted_at":null
}
]
}
Upvotes: 0
Views: 1408
Answers (1)
Thomas Bay
Reputation: 649
Your template is not set up properly.
You have made: v-for="currentItem in menuItems" on a div which you then immediately close.
For you to do a v-for on currentItem, your element with v-for on currentItem, has to be inside of the element that has a v-for on menuItems.
What you are currently doing:
<div v-for="currentItem in menuItems">test</div>
<div v-for="dish in currentItem"></div>
What you need to do instead:
<div v-for="currentItem in menuItems">
<div v-for="dish in currentItem"></div>
</div>
Upvotes: 2
Related Questions
- Nested v-for with Vuejs
- For loop array in Vuejs
- How to loop through 2-d array to display data on page?
- VueJs v-for loop an array inside an array
- how to nested loop and array in vue js?
- How do I use a vue.js nested for loop over two arrays with a v-for
- How to make iterations using v-for directive on nested array (array in array)
- Iterating through arrays in VueJs
- How to use v-for on a 2 dimensional array
- Vue v-for: iterate one element individually in an array