时间戳

首页 > 解决方案 > vue.js“类型错误：无法读取未定义的属性‘路径’”

vue.js - vue.js“类型错误：无法读取未定义的属性‘路径’”

问题描述

我知道这是一个常见问题，但我现在已经多次浏览我的文件，但无法找到错误。当我尝试在导航菜单中路由到我的组件时出现此错误。

我的 app.vue 文件：

    <template>
  <div id="app">
    <Navbar 
      :nav-links="navLinks"
    />
    <router-view/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar'
export default {
  components: {
    Navbar
  },
  data: () => ({
    navLinks: [
      {
        text: 'Home',
        path: '/home'
      },
      {
        text: 'About',
        path: '/about'
      },
      {
        text: 'Contact',
        path: '/contact'
      }
    ]
  })
}
</script>

我的导航栏组件（这是发生错误的地方）

    <template>
    <nav>
        <ul>
            <li v-for="{link, index} in navLinks" :key="index"
                @mouseover="hover = true"
                @mouseleave="hover = false">
                <router-link :to="link.path">
                    {{ link.text }}
                </router-link>
            </li>
        </ul>
    </nav>
</template>
<script>
export default {
    props: ['navLinks'],
  data(){
    return {
      hover: false,
    }
  }
}
</script>

我该如何解决？

标签： vue.js

解决方案

你在这里犯了两个错误。
一个是：

 <template>
   <div id="app">
    <Navbar 
     :nav-links="navLinks"
    />
   <router-view/>
  </div>

在这里您使用不同的名称进行绑定(nav-links)，您应该保持与您绑定数据的名称和道具内的名称相同(navLinks)。两个名称应该相同。

第二个：

v-for="{link, index} in navLinks"

语法错误，正确的语法应该是

v-for="(link, index) in navLinks"

推荐阅读