Question

我正在写一个应用程序，其中基于嵌套的JSONArray生成固定长度的列表。只要从列表中单击任何元素，并且该元素具有“子数据”数组，就会在列表中填充此“子数据”。基本上，您可以将其视为具有子菜单的菜单，而那些子菜单具有子菜单的菜单，依此类推。

我已经实现了两种进入子级[next（）]的方法，该方法可以正常工作，但是我不知道如何实现prev（）方法以在菜单中上一级。目前，我可以将其升级到一个级别，但是如果用户位于两个以上的级别内，则我不知道如何跟踪所有以上级别。

这是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

使用代码，您可以简单地执行以下操作： https://codepen.io/webkit_il/pen/bjebZR?editors=0011

var care = myobj.cars.filter(c => c.type=='car'); // So, this returns an array.

care.forEach(element => {
    console.log(Object.keys(element)); //Prints keys of each element
});

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

祝你好运！

VueJS工具转到上一级菜单

1 个答案: