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
]
}
})
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)
}
}
})
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;
}
})
Similar to Daniel's answer, but you can simply reference console
in data object
data(){
return {
console, //ES6
...
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.