在 Vue3 中查看绑定的 :key 值答案

【问题标题】：View binded :key values in Vue3在 Vue3 中查看绑定的 :key 值
【发布时间】：2021-08-25 05:29:24
【问题描述】：

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

我是 VueJS 的新手，我正在玩 Vue 指令。我想知道在控制台日志或开发人员工具中从哪里获取:key 值的列表。现在，我将它设置为id 属性并阅读它。感谢任何形式的帮助

【问题讨论】：

您可以将:key 设置为index。我希望我能理解，因为这不是一个非常明确的问题。
chrome 有一个名为 vuejs devtools 的扩展。无需转储到控制台即可查看组件状态。
@Eldar，如果我想将键值转储到控制台，我该怎么做

标签： vue.js vuejs3

【解决方案1】：

如果您只是在使用它并希望能够将其记录到控制台，您可以在您的方法中添加一个日志功能

  methods:{
    log(..args){
        console.log(...args)
    }
  }

那么你可以在任何地方使用 log 函数并传递相同的值

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

...但这只有在您可以将相同的值传递给两者时才有效

示例：

Vue.createApp({
  data: () => ({
    items: ['a', 'b', 'c']
  }),
  methods: {
    log(...args) {
      console.log(...args)
    },
  },
}).mount("#app");

<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.prod.js"></script>
<div id="app">
  <li v-for="(item, index) in items" :key="index">{{ item }}{{log(index)}}</li>
</div>

【讨论】：

明白。谢谢你。为什么我们的自定义方法调用{{log(index)}} 有效，而JS 日志记录{{console.log(index)}} 无效？
因为 vue 模板使用了不同的上下文。它有点像使用this 从脚本中调用某些东西。如果你尝试调用this.console.log，你也会在那里看到一个错误