Question

昨天我问了一个问题，但没有一个答案有效，所以我决定重新开始一个具有更多细节的问题。

您可以在此处查看问题：VueJS - using mustache template strings inside href attribute

基本上，我有一个vue应用，该应用分为多个部分。该项目的结构如下所示：

在我的“ Nav.vue”组件中，我有一个导航，我想在数据块中循环浏览。

该组件的整个代码如下：

<template>
    <div>
<header class="global-header">
  <div class="global-header__container">
    <h1>NAV IS HERE</h1>
    <nav class="nav-main" role="navigation" aria-label="Site">
      <ul>
        <li v-for="menuItem in menuItems" class="nav-item">
          <a
            :href="menuItem.url"
            class="nav-link"
            >{{ menuItems.text }}</a
          >
        </li>
      </ul>
    </nav>
  </div>
</header>
</div>
</template>
<script>
export default {
  name: 'Nav',
  data: function() {
    return {
      menuItems: [
        {text: 'Item 1', url: '/item-1'},
        {text: 'Item 2', url: '/item-2'},
        {text: 'Item 3', url: '/item-3'},
        {text: 'Item 4', url: '/item-4'}
      ]
    }
  }
}
</script>

在回答上一个问题时，我已完成了所有建议的操作：

使数据成为功能
对链接<a :href="menuItem.url" class="nav-link">{{ menuItems.text }}</a>使用正确的语法
修复菜单项中的错字。

但是，在所有这些建议之后，我的<ul>完全是空的。为什么？

我的App.vue看起来像这样：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

main.js看起来像这样：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router.js看起来像这样：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

所有这些都共享-我是否需要将数据放在其他地方？为什么我的<ul>为空？

Answer 1

在代码的这一部分：

<ul>
        <li v-for="menuItem in menuItems" class="nav-item">
          <a
            :href="menuItem.url"
            class="nav-link"
            >{{ menuItems.text }}</a
          >
        </li>
      </ul>

您必须将menuItems.text更改为menuItem.text。

VueJS-遍历vue组件内的列表会生成空列表

1 个答案: