Vue의 v-for 루프 내에서 항목을 console.log하는 방법

Vue의 v-for 루프 내에서 항목을 console.log하는 방법

어떻게 해야 할지 모르겠어요.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
        ]
    }
 })

다음과 같은 방법을 정의해야 합니다.

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

를 참조해당됩니다.

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

디버깅하는 값은 보통 랩으로 정리합니다.<pre>{{ myData }}</pre>다음과 같습니다.

<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>

단, 생성 시 템플릿 컨텍스트에 콘솔을 전달하면 콘솔도 사용할 수 있습니다.

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

대니얼의 대답과 비슷해요 하지만 간단히 언급하면console데이터 객체에서

data(){
  return {
  console, //ES6
  ...
  }
}

언급URL : https://stackoverflow.com/questions/54077681/how-to-console-log-an-item-inside-a-v-for-loop-in-vue