<!DOCTYPE html>
<html>
<head>
<title>app.support.by</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<table class='table table-hover'>
<thead align='center'>
<th>Компания</th>
<th>Сделки</th>
<th>Сумма сделок</th>
<th>Действие</th>
</thead>
<tbody>
<tr v-for='company in companies'>
<td>{{company.name}}</td>
<td>
<span v-for='deal in company.deals'>
{{deal}}
<br>
</span>
</td>
<td align='center'>
{{company.sum_deals}}
</td>
<td align='center' @click='removecompany(company.id)'>Удалить</td>
</tr>
</tbody>
<tfoot><tr>
<td colspan="1">Итого</td>
<td colspan="3" align='center'>{{totalsum}}</td>
</tr></tfoot>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
handler: './handler.php',
companies: [],
totalsum: 0,
},
created: function(){
this.request();
},
methods: {
request(){
axios.get(this.handler).then((response) => {
this.companies = response.data.companies;
console.log(this.companies);
this.totalsum = response.data.totalsum;
});
},
removecompany(id){
delete this.companies[id];
console.log(this.companies);
}
}
})
Средний
Простой
