How to console.log an item inside a v-for loop in Vue

Question

I can't figure out how to do a console.log to see what item is in the ul as its being passed.

 <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
        ]
    }
 })

it should just display, you should just look at what HTML the template is outputting, I think console logging would be a bit of overkill here — Derek Pollard
– Derek Pollard, Commented Jan 7, 2019 at 16:01
i guess i need for future endeavors as well, i need to know how to do it — Keith
– Keith, Commented Jan 7, 2019 at 16:04
a similar question: stackoverflow.com/questions/51080447/… — hrdom
– hrdom, Commented Aug 9, 2023 at 7:28

Boussadjra Brahim · Accepted Answer · 2019-01-07 15:59:32Z

24

you should define a method like :

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

in your script :

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

answered Jan 7, 2019 at 15:59

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jacob Goh Over a year ago

to use globally, add Vue.prototype.log = console.log; in main.js

Daniel · Accepted Answer · 2019-08-15 14:46:32Z

I usually wrap the value I'm debugging in <pre>{{ myData }}</pre> like this:

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

But you can also use console if you pass it into t he template context during create

 <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;
    }
 })

Lynx · Accepted Answer · 2019-10-23 09:44:30Z

1

Similar to Daniel's answer, but you can simply reference console in data object

data(){
  return {
  console, //ES6
  ...
  }
}

answered Oct 23, 2019 at 9:44

Lynx

2914 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to console.log an item inside a v-for loop in Vue

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related