Как console.log элемент внутри цикла v-for в Vue

Question

Я не могу понять, как сделать console.log, чтобы увидеть, какой элемент находится в ul во время его передачи.

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

Answer 1

Я обычно оборачиваю значение, которое отлаживаю, в {{ myData }} так:

<code><div v-for="(item, index) in todos" :key="index">
     <pre>{{ item }}

• {{key}}
  {{value}}

Но вы также можете использовать консоль, если передаете ее в контекст шаблона во время создания

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

Answer 2

вы должны определить метод как:

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

в вашем скрипте:

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