I am currently developing a vue component file where I have successfully fetched data using Laravel WebSockets. The issue I am encountering is that when I try to display the selected data in a table within the template tag, the rows in the table are being printed as blank. The number of rows keeps increasing, but the data within them remains empty. I would appreciate it if someone could point out where I might be going wrong.
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
<table border="1">
<tr>
<th>Email</th>
<th>Address</th>
</tr>
<tr v-for="list in Items" :key="list.id">
<td> {{list.email}} </td>
<td> {{list.address}} </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import Echo from "laravel-echo";
export default {
data(){
return{
Items:[]
}
},
mounted() {
this.FetchItems();
},
methods:{
FetchItems(){
window.Echo.channel('lists')
.listen('DataUpdate',(e) =>{
this.Items = e.lists;
console.log(this.Items);
});
}
}
}
</script>