CODEWITHSUNDEEP
javascriptvue.jsconsole.log
abdulmanov.ilmir
abdulmanov.ilmir

Reputation: 1375

Vue v-for output to console.log

The following example prints the list in HTML. The output in HTML is normal. But the output of the same list in console.log is duplicated. Why? I could not find an answer, but I noticed the following:

  1. if you do not output the productsCount variable in the HTML, then duplication in console.log does not occur.
  2. if you replace the mounted hook with created, then duplication in the console.log also does not occur.

I would be grateful if anyone could explain this behavior.
Vue v2.4.0

new Vue({
  data: {
    products: [1, 2, 3],
    productsCount: 0
  },
  methods: {
    cell(product) {
      console.log(product);
      return product;
    }
  },
  mounted() {
    this.productsCount = this.products.length;
  }
}).$mount('#products');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="products">
  <h6>productsCount: {{productsCount}}</h6>
  <ul>
    <li v-for="(product, index) in products">
      <span v-html="cell(product)"></span>
    </li>
  </ul>
</div>

Upvotes: 2

Views: 12358

Answers (1)

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

mounted() hook is called after the DOM has been mounted, which means the cell() method is already called while mounting the DOM.

In your mounted hook you are updating the data property which causes a rerender inturn calling the cell() method again. That's the reason you see your log appearing 2 times

Upvotes: 1

Related Questions