v-for循环在运行后打印空行

Question

我正在处理vue组件文件，我通过laravel WebSockets获取数据，现在我想在template标记中的表中打印所选数据，但我的行在打印为空的表中，行在增加，但数据为空。请告诉我哪里错了。

<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>

Answer 1

我的问题解决了，我需要将数据推送到变量中，而不需要分配给它。

Listen(){
window.Echo.channel('lists')
.listen('DataUpdate',(e) =>{
this.Items.push(e.lists);
});
}