Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
        ]
    }
 })
like image 347
Keith Avatar asked Jan 07 '19 15:01

Keith


People also ask

What is $data in Vue?

Data is the private memory of each component where you can store any variables you need. Props are how you pass this data from a parent component down to a child component. Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.


1 Answers

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)
    }
  }
})
like image 124
Boussadjra Brahim Avatar answered Sep 21 '22 23:09

Boussadjra Brahim