javascript - 如何循环JSON数据

Question

我有一个json数据，我想使用vue.js从中创建一个Navbar，我无法循环数据导航栏

这就是我正在尝试对 JSON 数据执行的操作，目前它是静态的，但我想循环遍历我拥有的数据

由于我的 JSON 数据是动态的，我从后端获取数据，因此我必须根据用户登录创建一个导航栏，以向他/她显示允许的任何内容.

我的 JSON 数据

    {
  "Dashboard": [
    {
      "type": "Dashboard",
      "link": "Dashboard.html"
    }
  ],
  "Graphical Reports": [
    {
      "type": "Outlet Sales Summary Pai chart",
      "link": "Outlet Sales Summary Pai chart.html"
    },
    {
      "type": "Payment mode wise Graph layout",
      "link": "Payment mode wise Graph layout.html"
    },
    {
      "type": "Outlet wise Sales Area Chart",
      "link": "AreaChart.html"
    },
    {
      "type": "Outlet wise Sales Line Chart",
      "link": "LineChart.html"
    },
    {
      "type": "Top 20 Sold Items",
      "link": "Top20Items.html"
    },
    {
      "type": "Outlet Wise Quantity And Amount",
      "link": "OutletWiseQuantityandAmount.html"
    }
  ],
  "Tabular Reports": [
    {
      "type": "Date wise Outlet wise Sales Summary",
      "link": "Date wise Outlet wise Sales Summary.html"
    },
    {
      "type": "Date wise OL Wise Counter wise Sales",
      "link": "Date wise OL Wise Counter wise Sales.html"
    },
    {
      "type": "Hourly wise Sales Bet Dates",
      "link": "Hourly wise Sales Bet Dates.html"
    },
    {
      "type": "Outlet wise Date wise NoOfBills",
      "link": "Date Wise Ol Wise Bill Count.html"
    },
    {
      "type": "Hourly sales Outlet wise Date wise",
      "link": "Hourly sales Outlet wise Date wise.html"
    },
    {
      "type": "Percentage Contribution Outlet wise",
      "link": "PercentageolWise.html"
    },
    {
      "type": "Outlet wise Item wise Sales With Date",
      "link": "MRPL Store Sales With Date.html"
    }
  ],
  "Drill down Reports": [
    {
      "type": "Sales Drilldown Counterwise Bet Dates",
      "link": "Sales Drilldown Counterwise Bet Dates.html"
    },
    {
      "type": "Sales Drilldown Billwise Bet Dates",
      "link": "Sales Drilldown Billwise Bet Dates.html"
    },
    {
      "type": "Sales Drilldown Itemwise for Date",
      "link": "Sales Drilldown Itemwise for Date.html"
    },
    {
      "type": "Linked Sales Report Bet Dates",
      "link": "LinkingReport.html"
    }
  ],
  "Masters": [
    {
      "type": "Item Master",
      "link": "ItemMaster.html"
    }
  ],
  "Setup": [
    {
      "type": "Change Password",
      "link": "ChangePassword.html"
    },
    {
      "type": "User Admin",
      "link": "UserAdmin.html"
    }
  ],
  "Transactions": [
    {
      "type": "Indent Request",
      "link": "IndentWithCategoryWiseFilter.html"
    }
  ]
}

new Vue({
  el: '#app',
  data() {
    return {
      navData: {
        "Setup": [{
            "menu": "Submenu-1"
          },
          {
            "route": "submenu-2"
          }
        ],
        "Report": [{
            "menue": "subreport-1"
          },
          {
            "route": "subreport-2"
          }
        ]
      }

    }
  },

})

Vue.config.productionTip = false;
Vue.config.devtools = false;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id=app>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <!-- Dropdown -->
      <li v-for="data in navData"class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        {{Object.keys(data)}}
      </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">menu</a>

        </div>

      </li>
    </ul>
  </nav>
</div>

我已经尝试过，但不知道如何解决

Answer 1

尝试下面的代码片段:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id=app>

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <!-- Dropdown -->
      <li v-for="(data,menu) in navData"class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        {{ menu }}
      </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">{{ data[0].menu }}</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      navData: {
        "Setup": [{
            "menu": "Submenu-1"
          },
          {
            "route": "submenu-2"
          }
        ],
        "Report": [{
            "menu": "subreport-1"
          },
          {
            "route": "subreport-2"
          }
        ]
      }

    }
  },

})

Vue.config.productionTip = false;
Vue.config.devtools = false;
</script>