VueJS implement go to prev menu - vue.js

Question

I am writing an app where a fixed length list gets generated based on the nested JSONArray. Whenever any elements gets clicked from the list and if it has a "sub data" array,the list gets populated with this "sub data". Basically, you can think of it as menus which has submenus and those submenus has subsubmenus and so on.
I have implemented two methods for going to sublevels [next()] which works fine but I don't know how to implement prev() method to go one level up in the menu. Currently, I can make it go one level up but if user is inside more than two level then I don't know how to keep the track of all above levels.
Here is the codepen -
codepen
let JSONModel = (_id, _lvl, _title, _data) => {
return {
id: _id,
lvl: _lvl,
title: _title,
data: _data
};
};
let Menu = [
{
id: "01",
lvl: "01",
title: "menu 1",
data: []
},
{
id: "02",
lvl: "01",
title: "menu 2",
data: []
},
{
id: "03",
lvl: "01",
title: "menu 3",
data: []
},
{
id: "04",
lvl: "01",
title: "menu 4",
data: [
{
id: "01",
lvl: "02",
title: "submenu 1",
data: []
},
{
id: "02",
lvl: "02",
title: "submenu 2",
data: [
{
id: "01",
lvl: "03",
title: "sub submenu 1",
data: []
},
{
id: "02",
lvl: "03",
title: "sub submenu 2",
data: []
},
{
id: "03",
lvl: "03",
title: "sub submenu 3",
data: []
},
{
id: "04",
lvl: "03",
title: "sub submenu 4",
data: []
}
]
},
{
id: "03",
lvl: "02",
title: "submenu 3",
data: []
},
{
id: "04",
lvl: "02",
title: "submenu 4",
data: []
}
]
}
];
let demo = new Vue({
el: "#app",
data: {
input: Menu,
prevMenu:[]
},
computed: {},
created: function () {
},
methods: {
next: function(val1,val2) {
if (val1.length != 0) {
this.input = val1;
this.prevMenu = val2;
console.log(this.prevMenu);
}
},
prev: function() {
console.log(this.prevMenu);
this.input = this.prevMenu;
}
}
});
$("#prevmenu").on("click", function() {
demo.prev();
});

Answer 1

Using your code, you can simply do this:
https://codepen.io/webkit_il/pen/bjebZR?editors=0011
next: function(val1,val2) {
if (val1.length != 0) {
this.input = val1;
this.prevMenu.push(val2);
}
},
prev: function() {
let _menu = this.prevMenu.slice(); // this is just to clone the array
this.input = _menu[_menu.length - 1];
this.prevMenu.pop();
}
changed your prevMenu into an array, then everytime you
go back just use the last one, and remove it from the array...
good luck!