Vue3中如何在开发者工具/控制台查看v-for绑定的:key值列表

获取v-for绑定的key值列表的几种方案 #

1. 使用Vue Devtools（最推荐，无需修改代码） #

• 打开浏览器Vue Devtools插件，选中v-for代码所属的父组件实例
• 在组件状态面板找到sizes数组，你当前绑定的:key是数组索引，直接遍历sizes取索引就能得到完整key列表
• 后续如果把key改为业务字段（比如size.id），也能直接从组件状态中提取对应值，无需操作DOM

2. 控制台直接读取组件实例（临时调试用） #

Vue 3 环境

给v-for的父容器（比如ul）加个唯一标识，如id="sizeList"，控制台执行：

// 取对应DOM的父组件实例
const parentComp = document.querySelector('#sizeList').__v_parent
// 直接从响应式状态生成key列表
const keyList = parentComp.sizes.map((_, index) => index)
console.log(keyList)

Vue 2 环境

// 取对应DOM绑定的组件实例
const vm = document.querySelector('#sizeList').__vue__
const keyList = vm.sizes.map((_, index) => index)
console.log(keyList)

3. DOM属性读取（你当前的方案完全可用） #

如果确实需要从DOM层拿值，绑定自定义data属性是常规合法操作，无性能问题：

<li 
  v-for="(size, index) in sizes" 
  :key="index" 
  :data-list-key="index"
>{{ size }}</li>

控制台读取：

const keyList = Array.from(document.querySelectorAll('li[data-list-key]')).map(el => el.dataset.listKey)
console.log(keyList)

小提示：正常业务逻辑不建议从DOM读取key，所有key相关的值在Vue组件的响应式状态里都能直接获取，符合Vue的设计规范，维护成本更低。

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