Vue 组件属性或方法“x”未定义

Question

有一个问题，我在 vue 中的组件无法正常工作。 我对打字稿的东西有点陌生，所以对它不太了解。 同样在 Chrome 的 vue 调试器中，它说它有两个 $attr：标题和链接。 此刻有两个文件。 导航：

<template>
    <nav class="navbar navbar-expand-lg navbar-light">
        <router-link to="/" class="navbar-brand">HBS2</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id=navContent>
            <ul class="navbar-nav mr-auto">
                <NavItem  v-for="menuItem in menuItems"
                v-bind:key="menuItem.id"
                v-bind:title="menuItem.title"
                v-bind:link="menuItem.link"
                />
            </ul>
        </div>
    </nav>
</template>

<script lang="ts">

import Vue from 'vue'
import Component from 'vue-class-component'
import NavItem from '@/components/common/main/navigation/NavItem.vue'

@Component({
  components: {
    NavItem
  }
})
export default class Navigation extends Vue {
    menuItems = [
      {
        id: 1,
        title: 'foo',
        link: '/foo'
      },
      {
        id: 2,
        title: 'bar',
        link: '/bar'
      }
    ]
}
</script>

和 NavItem 组件

<template>
    <li class="nav-item">
        {{title}}
    </li>
</template>

<script lang="ts">

import { Prop, Component, Vue } from 'vue-property-decorator'

@Component
export default class NavItem extends Vue {}

我也尝试在 NavItem 中创建一个 Prop，但也没有成功。

编辑： 错误信息如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <NavItem> at src/components/common/main/navigation/NavItem.vue
       <Navigation> at src/components/common/main/navigation/Navigation.vue
         <App> at src/App.vue
           <Root>

Answer 1

您应该在mounted() 生命周期方法中定义menuitems 数组的类型。

export default class Navigation extends Vue {
  menuItems : Array<{}>;

  // Lifecycle hook
  mounted () {
    menuItems = [
      {
        id: 1,
        title: 'foo',
        link: '/foo'
      },
      {
        id: 2,
        title: 'bar',
        link: '/bar'
      }
    ]
  }
}