Vue组件文档属性无法动态渲染到页面怎么办？

码农智越提问于 2026-02-05 07:01:27 阅读 56

组件

我正在开发一个可复用的按钮组件，想通过props传递文档说明，但渲染时文档属性一直显示为空：


<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="(prop, index) in documentation" :key="index">
        {{ prop.name }} - {{ prop.type }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    documentation: Array
  }
}
</script>

父组件这样传值：<my-component :title="'按钮文档'" :documentation="[{name:'size', type:'String'}]"></my-component>，但页面就是不显示属性列表，控制台也没报错。试过把v-for改成v-if就正常显示标题了，可能是循环哪里写错了？

文档生成

我来解答赞 13 收藏

反馈

1 条解答

♫俊衡 Lv1

你这个写法基本是对的，但问题出在 key 上。用 index 当 key 在动态数组里会有问题，改成用 prop.name 就行了。

<li v-for="(prop, index) in documentation" :key="prop.name">

  {{ prop.name }} - {{ prop.type }}

</li>

或者你也可以直接用组件接收的 props：

<li v-for="prop in documentation" :key="prop.name">

  {{ prop.name }} - {{ prop.type }}

</li>

2026-02-05 07:02