Vue中如何将v-for的index拼接至:key的item.path后生成指定格式？

这事儿超容易搞定！Vue的模板语法支持直接在属性绑定里写表达式，你只需要把item.path和循环的index做字符串拼接就行，给你两种常用的写法：

方法1：ES6模板字符串（推荐，可读性更高） #

用反引号包裹的模板字符串，通过${}插入变量，直接生成你要的/abc-1这种格式：

<template v-for="(item, index) in menuList">
  <MenuItem 
    v-if="item.children.length <= 1" 
    class='child' 
    :name="item.children[0].name" 
    :key="`${item.path}-${index}`"
  >
    <!-- 你的MenuItem内部内容 -->
  </MenuItem>
</template>

方法2：传统字符串拼接 #

如果项目暂时不支持ES6语法，也可以用加号直接拼接字符串：

<template v-for="(item, index) in menuList">
  <MenuItem 
    v-if="item.children.length <= 1" 
    class='child' 
    :name="item.children[0].name" 
    :key="item.path + '-' + index"
  >
    <!-- 你的MenuItem内部内容 -->
  </MenuItem>
</template>

小提醒 #

• 数字类型的index会自动被转换成字符串，不用额外处理类型问题
• 用path + index的组合能确保每个循环项的key唯一，避免Vue渲染时弹出重复key的警告

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