Question

这可能是一个微不足道的问题，但我还没弄清楚如何让这个工作。我试图将一个哈希数组作为道具传递给我的Vue.js项目中的另一个组件。

我的代码看起来像这样：

Sidebar.vue

<template>
  <b-nav vertical>
    <b-nav-item v-for='nav in items' :key='nav.title' :to='nav.url'>
      {{nav.title}}
    </b-nav-item>
  </b-nav>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

我正在调用此代码：

<template>
  ...
  <sidebar :items="myItems"/>
  ...
</template>

<script>
  import Sidebar from '~/components/Sidebar.vue'

  export default {
    components: {
      Sidebar
    },
    data: () => {
      return {
        myItems: [
          {
            title: 'Link 1',
            url: '/link1'
          },
          {
            title: 'Link 2',
            url: '/link2'
          },
          {
            title: 'Link 3',
            url: '/link4'
          },
          {
            title: 'Link 4',
            url: '/link4'
          }
        ]
      }
    }
  }
</script>

但是，页面上没有任何内容。如何将哈希数组作为道具传递给我的补充工具栏组件？

提前致谢！

Answer 1

您应该将箭头功能data: () => {更改为data() {

根据documentation：

请注意，您不应将箭头函数与data属性一起使用（例如data: () => { return { a: this.myProp }}）。原因是箭头函数绑定了父上下文，因此这不是您期望的Vue实例，并且this.myProp将是未定义的。

Vuejs：将一系列哈希传给道具

1 个答案: