Vue技术问题：如何正确从data()中渲染链接列表？

问题说明 #

需要实现点击标题展开下拉区域，显示对应链接列表，但原代码无法正常渲染出预期的列表结构。

错误原因 #

1. 未遍历item.list数组，直接渲染数组会输出字符串而非独立链接项
2. 下拉区域未绑定item.show状态控制显示/隐藏
3. v-for的key绑定格式错误，不符合Vue要求

正确代码实现 #

JavaScript 部分

export default {
    data() {
        return {
            items: [
                {
                    title: 'title 1',
                    show: false,
                    list: [
                        'item 1',
                        'item 2',
                    ]
                },
                {
                    title: 'title 2',
                    show: false,
                    list: [
                        'item 1',
                        'item 2',
                    ]
                },
            ]
        }
    },
    methods: {
      openItem(index) {
        this.items[index].show = !this.items[index].show
      },
    },
}

HTML 模板部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id="app">
  <ul>
    <li class="nav-item" v-for="(item, i) in items" :key="i" :class="{show: item.show}">
      <div class="nav-title nav-title-caption" @click="openItem(i)">{{item.title}}</div>
      <!-- 用v-show控制下拉区域显示隐藏 -->
      <div class="nav-dropdown" v-show="item.show">
        <!-- 遍历list数组生成每个链接项 -->
        <span class="nav-title" v-for="(link, idx) in item.list" :key="idx">
          <a href="">{{link}}</a>
        </span>
      </div>
    </li>
  </ul>
</div>

关键修改点 #

• 给nav-dropdown添加v-show="item.show"，实现点击标题时的展开/收起切换
• 在nav-dropdown内部新增v-for="(link, idx) in item.list"，遍历数组生成每个独立的链接项
• 修正v-for的key绑定为合法的唯一标识（这里用索引i和idx，如果列表项有唯一ID推荐用ID）
• 保持原有的openItem方法逻辑不变，负责切换对应项的show状态

可选优化（如果需要动态链接） #

如果需要给每个链接设置不同的href，可以把list改成对象数组：

list: [
  { text: 'item 1', url: '/path1' },
  { text: 'item 2', url: '/path2' }
]

模板中对应修改：

<a :href="link.url">{{link.text}}</a>

内容的提问来源于stack exchange，提问作者mo link