Question

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

我的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>

我的Navbar组件（这是发生错误的地方）

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

我该如何解决？

Answer 1

Navbar组件中的道具命名为 navLinks ，但您可以通过 nav-links 在外部访问它。这应该起作用：

:navLinks="navLinks"

带有 {} 的v-for语法不正确。使用（）：

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

Answer 2

<li v-for="{link, index} in navLinks" :key="index"...

应该是

<li v-for="(link, index) in navLinks" :key="index"...

到现在（已分解），链接指向对象内部的link属性，而不是对象本身。另外，index可能是未定义的，因为navLinks对象可能没有显式属性index。因此，Vue可能还会抱怨在v-for中使用无效索引。

由于仅使用path道具，因此实际上可以使用解构，如下所示：

<li v-for="({ path }, index) in navLinks" :key="index"
  @mouseover="hover = true"
  @mouseleave="hover = false">
  <router-link :to="path">
</li>

另一个无关的注释：hover属性当前正在所有navLink之间共享。如果您希望它与当前悬停的元素相关，则必须将其单独保存（可能保存在navLink本身中）。

对于:nav-links="navLinks"，您所做的不仅是完全合法的，而且是推荐的做法（根据HTML规范）。使用:navLinks="navLinks"依赖Vue的HTML解析器，它将在幕后将其转换为nav-links-检查HTML元素，您会发现它）。

如果您想了解细节，可以查看关于该主题的this discussion。结果是：使用任何一个，但是如果使用camelCase，则它将与呈现的标记不一致。如果您使用kebab-case，它将与呈现的标记保持一致，因此，例如，在编写测试时，如果您需要按其属性选择元素，就不必处理这种差异（简单地转换{{ 1}}到camelCase-因此，它与呈现的标记不一致，因此测试根据是否使用lowercase或mount开始通过/失败。不用说，这实际上不是良好的测试设置。）

使用shallowMount和<SomeComponent />进行了同样的讨论。虽然这两种方法都可行，但是如果需要选择存根子组件，则在编写测试时必须先解决使用第一个问题。

此外，vue/attribute-hyphenation（您的操作方式）是以下vue linting预设的一部分：

plugin：vue /强烈推荐
plugin：vue / vue3-recommended
plugin：vue /推荐

Answer 3

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

 <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"

vue.js“ TypeError：无法读取未定义的属性'path'”

3 个答案: