JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js
"> </script>
<div id="completethelook">
<cpldataitems>
</cpldataitems>
</div>
JavaScript
var item = Vue.extend({
props: ['cpldataitems'],
//template: '<div v-for="(item, index) in cpldataitems"><div v-for="item in index">{{item.product_id}} - {{item.title}} - {{item.small_image_link}} - {{item.price}}</div></div>',
template : "<div v-for='(item, index) in cpldataitems'><div v-for='item in index'><div class='imagegrid'><a href={{item.product_id}}><div class='item'><img src={{item.small_image_link }}></div><div class='product-details'><p class='name' data-pc9=''>{{item.title}}</p><p class='price'>$ {{item.price }}</p></div></a></div></div></div>",
//template : "<div v-for='(item, index) in cpldataitems'><div v-for='item in index'><div class='imagegrid'><a href={{item.product_id}}><div class='item'><img :src='{{item.title}}' /></div><div class='product-details'><p class='name' data-pc9=''>{{item.title}}</p><p class='price'>$ {{item.price }}</p></div></a></div></div></div>",
events: {
datahere: function () {
this.init();
}
},
methods: {
init: function(){
this.setPrice();
},
setPrice: function(){
}
}
})
Vue.component('item', item);
var cpldataitems = Vue.extend({
ready: function(){
this.init();
},
data: function(){
return {
cpldataitems: {}
}
},
methods:{
init: function(){
this.getCompletetheLookItems();
},
getCompletetheLookItems: function(){
var carEl = $('.slick-caraousal');
var vm = this;
var reqData = {
"api_key": '4ddc8587f67daafd279c516c2d185578de58edf7',//LSCO.vue.key,
"cp_ensemble": "true",
"product_id": '125010229',//pc9,
"widget_list": "[8]",
"mad_uuid": "dev",
"num_results": "[12]",
"details": "true"
};
$.ajax({
url: 'https://us-east-1-api.madstreetden.com/widgets',//LSCO.vue.endpoint,
async: true,
crossDomain: true,
type: "POST",
data: reqData,
...