JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
  <mytable v-bind:order='order'></mytable>
</div>

JavaScript

Vue.component('ginput', {
	props:['name', 'price', 'qty'],
  template: '<input :value="name || price || qty">'
})

Vue.component('mytable', {
	props:['order'],
  template: `	
    <table>
    <thead>
      <tr>
        <th>name</th>
        <th>price</th>
        <th>quantity</th>
      </tr>
    </thead>
      <tbody>
    <tr v-for='item in order'>
    <td><input :value="item.name"></td>
    <td><input :value="item.price"></td>
    <td><input :value="item.quantity"></td>
    </tr>
    </tbody>
  </table>`
})

window.vm = new Vue({
	el: '#app',
  data: {
  	order: [
    	{name: 'test1', price: 1.28, quantity: 1},
      {name: 'test2', price: 2.56, quantity: 2},
      {name: 'test3', price: 5.12, quantity: 3},
    ]
  }
});