10

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
        ]
    }
 })
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Keith
  • 4,059
  • 2
  • 32
  • 56
  • 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 Jan 07 '19 at 16:01
  • i guess i need for future endeavors as well, i need to know how to do it – Keith Jan 07 '19 at 16:04
  • a similar question: https://stackoverflow.com/questions/51080447/how-can-i-use-console-log-or-console-error-in-a-vue-template – hrdom Aug 09 '23 at 07:28

3 Answers3

21

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)
    }
  }
})
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
7

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;
    }
 })
Daniel
  • 34,125
  • 17
  • 102
  • 150
1

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

data(){
  return {
  console, //ES6
  ...
  }
}
Lynx
  • 271
  • 4
  • 7