One interesting issue arises when printing a list in HTML and checking the output in HTML versus in console.log. It seems that the output is duplicated in the console. After some investigation, I made the following observations:
- Not showing the
productsCountvariable in the HTML prevents the duplication inconsole.log. - Replacing the
mountedhook withcreatedalso eliminates the duplication in theconsole.log.
If anyone has an explanation for this behavior, I would greatly appreciate it.
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>