[Vuejs]-Feed Outside JS object into Vue.js component

by

0👍

It doesn’t work, because there is some order in which you have to create component, html, and Vue instance.

// just use all your code together
// first, prepare the component
Vue.component('product', {
  props: ['product'],
  template: `
    <div class="prod">
      <h3>{{product.title}}</h3>
      <p>{{product.price}} €</p>
    </div>
  `
})

// and get products
var prodList = getProductsAsync('/someMountpoint')

// then generate html with unknown tags "product"
var prodHtml = '<div id="productList">'
for(let i = 0; i < prodList.length; i++) {
  prodHtml += `<product :product='prodList[i]'></product>`
}
prodHtml += '</div>'

// append this html to DOM
$('#someWhere').html(prodHtml)

// and now create new Vue instance to replace
// these unknown product tags with real tags
new Vue({
  el: '#productList'
})

Leave a comment