Vue.js 道具值不为'；t传递给子组件，can'；我不明白为什么

在父组件中，我将我的子组件称为“DotsNavigation”：

<template>
  <div>
    <dots-navigation :steps="steps" />
  </div>
</template>

<script>
import DotsNavigation from "@/components/dashboard/dots-navigation"

export default {
  components: {
    DotsNavigation
  },
  data: function() {
    return {
      steps: [
        {
          title: "title1",
          path: "path1"
        },
        {
          title: "title2",
          path: "path2"
        },
        ...
      ]
    }
  }
}
</script>

从“@/components/dashboard/dots navigation”导入点导航
导出默认值{
组成部分：{
DotsNavigation
},
数据：函数（）{
返回{
步骤：[
{
标题：“标题1”，
路径：“路径1”
},
{
标题：“标题2”，
路径：“路径2”
},
...
]
}
}
}

我的子组件“DotsNavigation”如下所示：

<template>
  <nav>
  <div v-for="(step, key) in steps">
    <router-link
      :key="`dot-${key}`"
      :to="`/dashboard/${step.path}`"
    >
      <div>
        {{ key + 1 }}
      </div>
      <div>
        {{ step.title }}
      </div>
    </router-link>
    <div
      :key="`line-${key}`"
      v-if="key !== steps.length - 1"
    ></div>
  </div>
  </nav>
</template>

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

{{key+1}}
{{step.title}}
导出默认值{
道具：{
步骤：{
类型：数组，
默认值：（）=>[]
}
}
}

---

在我的儿童作曲中，“步骤”是空的。我不明白为什么会这样。有什么想法吗？

试着不要在

模板

中使用

模板

元素。 在

DotsNavigation中

将内部

模板

替换为

div

，并查看其是否有效：

<template>
  <nav>
    <div v-for="(step, key) in steps" :key="`div-${key}`">
        <router-link
      :key="`dot-${key}`"
      :to="`/dashboard/${step.path}`"
    >
      <div>
        {{ key + 1 }}
      </div>
      <div>
        {{ step.title }}
      </div>
    </router-link>
    <div
      :key="`line-${key}`"
      v-if="key !== steps.length - 1"
    ></div>
    </div>
  </nav>
</template>

{{key+1}}
{{step.title}}

控制台有什么提示吗？您有vue调试器浏览器工具吗？DotsNavigation的

…

中有什么？你怎么知道它是空的？您的代码似乎正确无控制台错误<代码>步骤为空，我在Vue chrome工具中看到它是。我添加了我用

…

隐藏的其余代码。您的DotsNavigation组件有多个根组件。你应该把v-for-divit包装起来。它对我来说很好，也许可以上传你的整个代码库。谢谢，不，不是那样，但是应该只有一个“模板”元素，所以你似乎有多个错误there@drake035我改了密码。试试这个新的。“它现在必须工作了。”drake035我看到了你的新帖子。尝试将

键

添加到具有

v-for