VueJS 实现去上一级菜单

Question

我正在编写一个应用程序，其中基于嵌套的 JSONArray 生成固定长度的列表。每当从列表中单击任何元素并且它有一个 "sub data" 数组时，列表就会填充这个 "sub data"。基本上，您可以将其视为具有子菜单的菜单，而这些子菜单又具有子子菜单，依此类推。

我已经实现了两种进入子级别的方法 [next()]，它们工作正常，但我不知道如何实现 prev() 方法以在菜单中向上一级。目前，我可以让它上升一级，但如果用户在两级以上，那么我不知道如何跟踪所有以上级别。

这是代码笔 -

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

使用您的代码，您可以简单地执行以下操作： 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();
    }

将您的 prevMenu 更改为一个数组，然后每次您返回使用最后一个，并将其从数组中删除...

祝你好运！

VueJS 实现去上一级菜单

VueJS implement go to prev menu

interaction

menu

vue.js