7
votes

Comment console.log un élément dans une boucle v-for dans Vue

Je n'arrive pas à comprendre comment faire un console.log pour voir quel élément se trouve dans ul au fur et à mesure de sa transmission.

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

javascript html vue.js vue-component vuejs2

2 commentaires

il devrait simplement s'afficher, vous devriez simplement regarder le code HTML généré par le modèle, je pense que la journalisation de la console serait un peu excessive ici

Je suppose que j'ai également besoin de projets futurs, j'ai besoin de savoir comment le faire

3 Réponses :

14
votes

vous devez définir une méthode comme:

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

dans votre script:

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

1 commentaires

pour une utilisation globale, ajoutez Vue.prototype.log = console.log; dans main.js

6
votes

J'emballe généralement la valeur que je débogue dans

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

comme ceci:

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

Mais vous pouvez aussi utilisez la console si vous la passez dans le contexte du modèle lors de la création

0 commentaires

1
votes

Similaire à la réponse de Daniel, mais vous pouvez simplement référencer console dans l'objet de données

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

0 commentaires