Компоненты Vue в Laravel
resources\js\components\row\RowItem.vue
<template>
<tr class="row">
<td>{{row.name}}</td>
<td>{{row.description}}</td>
</tr>
</template>
<script>
export default{
props:{
row:{
type:Object,
required:true,
}
}
}
</script>resources\js\components\row\RowList.vue
<template>
<div>
<h3>Список записей</h3>
<table>
<tbody>
<row-item :key="row.id" :row="row" v-for="row in rows"/>
</tbody>
</table>
</div>
</template>
<script>
export default{
props:{
rows:{
type:Array,
required: true,
}
}
}
</script>resources\js\components\app.vue
<template>
<div class="app">
<h1>Страница с записями</h1>
<row-list v-if="!isRowsLoading" :rows="rows" @remove="removeRow"/>
<div v-else>Идет загрузка...</div>
</div>
</template>
<script>
export default{
data(){
return {
rows:[],
isRowsLoading:false,
}
},
methods:{
removeRow(row) {
this.rows = this.rows.filter(p => p.id !== row.id)
},
async fetchRows(){
try{
this.isRowsLoading = true;
setTimeout(async()=> {
const response = await fetch('/api/all');
if (response.status === 200){
const result = await response.json();
this.rows = result;
console.log(result);
}
this.isRowsLoading = false;
},1000)
} catch(e){
alert('ошибка')
}
}
},
mounted(){
this.fetchRows();
},
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app{
padding: 20px;
}
</style>