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

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

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

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

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

1 个答案: