JSFiddle - React, Tailwind, and code Playground

by All Laravel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<div class="container">
  <div class="row" id="app6">
    <product-item v-for="item in productList" v-bind:product="item"></product-item>
  </div>
</div>

JavaScript

Vue.component('product-item', {
  props: ['product'],
  template: '<div class="col-md-4"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">{{ product.name }}</h3></div><div class="panel-body">{{ product.price }}</div></div></div>'
});

var app6 = new Vue({
  el: '#app6',
  data: {
    productList: [
      { name: 'Bộ phát wifi TENDA FH304', price: '600,000'},
      { name: 'Bộ phát wifi TENDA N300', price: '280,000' },
      { name: 'Bộ phát wifi TENDA N301', price: '320,000' },
      { name: 'Bộ phát wifi TENDA A301', price: '650,000' }
    ]
  }
});