How to console.log an item inside a v-for loop in Vue
13,147
Solution 1
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)
}
}
})
Solution 2
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;
}
})
Solution 3
Similar to Daniel's answer, but you can simply reference console
in data object
data(){
return {
console, //ES6
...
}
}
Author by
Keith
Updated on July 28, 2022Comments
-
Keith almost 2 years
I can't figure out how to do a
console.log
to see what item is in theul
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 ] } })
-
Jacob Goh over 4 yearsto use globally, add
Vue.prototype.log = console.log;
inmain.js