Рубрики
Laravel+Vue3 project Vue.js Vue компоненты

Vue Список записей из БД

Компоненты 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>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *