JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.14/lodash.min.js"></script>
<div id="app">
<div class="col-lg-12 col-md-12">
<p>Адрес клиента:</p>
</div>
<div class="box">
<div class="box-header">
<h3 class="box-title">Адрес клиента:</h3>
</div>
<div class="box-body no-padding">
<table @keyup.enter="addItem" class="table table-condensed">
<tbody>
<tr>
<th style="width: 20px">#</th>
<th>арт.</th>
<th>названние</th>
<th style="width: 40px">кол.</th>
<th>цена</th>
<th>сумма</th>
<th></th>
</tr>
<tr v-for="(item, index) in order">
<td>{{ index }}</td>
<td><input type="text" v-model="item.article" @input="onArticleChange(item)"></td>
<td><input type="text" v-model="item.name"></td>
<td><input type="text" v-model="item.value"></td>
<td><input type="text" v-model="item.price"> руб.</td>
<td><input type="text" v-model="item.total"></td>
<td><a href="#" @click="removeItem(index)" class="fa fa-remove">del</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer clearfix">
<ul class=" no-margin pull-right">
<a href="/clients/add_order/" class="btn btn-success">Сохранить</a>
</ul>
</div>
</div>
</div>
JavaScript
new Vue({
el: '#app',
data: {
order: [],
},
methods: {
addItem() {
this.order.push({
article: '',
name: '',
value: '',
price: '',
total: '',
});
},
removeItem(index) {
this.order.splice(index, 1);
},
onArticleChange: _.debounce(function(item) {
Object.assign(item, {
name: (Math.random() * 100000000 | 0).toString(16),
price: Math.random() * 100000 | 0,
});
}, 700),
},
created() {
this.addItem();
},
});