Feed Outside JS object into Vue.js component

Question

In my JS I have list of products.

var productData = [{
    title: 'Bike',
    price: 300
},{
    title: 'Guitar',
    price: 199
}]

This data is gathered from remote Json in a Async call . So I have to do this in JS.

Eventually, I come to a situation, that I need to display this product. But here are 2 things. 1) In HTML I am outside of my main Vue instance scope . It is so because there is 3rd party API that interacts with those products, apart other things... So This array is not bound to Vue instance in any way. 2) This product list is dynamically created, on the fly. In order to display it, I have to do a good old html string concatenation and then apply it.

Main problem : Now whenever I need to display a product - I have a Vue.js Component for it. That has a template, and all data goes really nicely. I obviously want to reuse this same template.

So right now I have something like this:

//Vue.js Component, that I want to use, and feed my product to:
Vue.component('product', {
    props: ['product'],
    template: `
        <div class="prod">
            <h3>{{product.title}}</h3>
            <p>{{product.price}} €</p>
        </div>
`, data() {
        return {

        }
    }
});

Next in JS, I have this code:

var prodList = getProductsAsync("3rd party service URL and parameters");
var prodHtml = '';
for(var i = 0; i < prodList.length; i++){
    prodHtml += `
        <div class="prod">
            <h3>${prodList[i].title}</h3>
            <p>${prodList[i].price} €</p>
        </div>
    `;
}

Here I have 2 templates (one as JS html, and another in Vue.js component), that is redundant. I need to have 1 way to maintain this template. At the moment template is simple, but more functionality will shortly come.

Idealy I would like my JS object to use my Vue.js template. As a result it would also behave as Vue.js component too.

So in my JS I would like to have it like this (But this obviously does not work):

var prodList = getProductsAsync("3rd party service URL and parameters");
var prodHtml = '';
for(var i = 0; i < prodList.length; i++){
    prodHtml += ` <product :product='prodList[i]'></product>`; // attempt to use Vue.js component 'on the fly' but this does not work!
}

Any suggestions?

Answer 1

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