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

时间:2019-01-07 15:57:33

标签: javascript vue.js vuejs2 vue-component

我不知道如何通过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
        ]
    }
 })

3 个答案:

答案 0 :(得分:4)

您应该定义一种方法:

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

在您的脚本中:

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

答案 1 :(得分:0)

我通常将要调试的值包装在SomeCol 25 New Account 中,

<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>

答案 2 :(得分:0)

与Daniel的回答类似,但是您可以在数据对象中简单引用hi

console