如何在 Vue 中的 v-for 循环中 console.log 一个项目

Question

我不知道如何做一个 console.log 来查看 ul 中的项目是什么。

  <div v-for="(item, index) in todos" :key="index">
     <ul v-if="item" :load="console.log(item)">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key">{{ key }}</label>
            <div v-bind:id="key">{{ value }}</div>
         </li>
     </ul>
 </div>

 var vm = new Vue({
    el: '#components-demo',
    data: {
        todos: [
            newData
        ]
    }
 })

原文由 Keith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该定义一个方法，例如：

   <ul v-if="item" :load="log(item)">

在你的脚本中：

 var vm = new Vue({
  el: '#components-demo',
  data: {
    todos: [
      newData
    ]
  },
  methods: {
    log(item) {
      console.log(item)
    }
  }
})

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我通常将正在调试的值包装在 <pre>{{ myData }}</pre> 中，如下所示：

 <div v-for="(item, index) in todos" :key="index">
     <pre>{{ item }}</pre>
     <ul v-if="item" :load="item">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key">{{ key }}</label>
            <div v-bind:id="key">{{ value }}</div>
         </li>
     </ul>
 </div>

但是如果你在创建期间将它传递到模板上下文中，你也可以使用控制台

 <div v-for="(item, index) in todos" :key="index">
     <ul v-if="item" :load="console.log(item)">
         <li v-for="(value, key) in item" :key="key">
            <label v-bind:for="key">{{ key }}</label>
            <div v-bind:id="key">{{ value }}</div>
         </li>
     </ul>
 </div>

 var vm = new Vue({
    el: '#components-demo',
    data: {
        todos: [
            newData
        ]
    },
    created() {
      this.console = window.console;
    }
 })

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议