Vue v-for how to iterate two dimensional array

Question

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&eacute; 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&eacute; 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&eacute; 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
      }
   ]
}

You need the key so vue knows if the dataset changes which rows to update. I don't think you have a 2d array, you have an array of objects? — Simon
– Simon, Commented May 21, 2020 at 21:26
Thomas is correct with the template, so I would accept that answer providing it works for you. — Simon
– Simon, Commented May 21, 2020 at 21:55

Thomas Bay · Accepted Answer · 2020-05-21 21:36:38Z

2

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>

edited May 21, 2020 at 21:36

answered May 21, 2020 at 21:29

Thomas Bay

6494 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue v-for how to iterate two dimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related