时间戳

首页 > 解决方案 > v-for 循环在运行后打印空行

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

问题描述

我正在处理 vue 组件文件，我通过 laravel WebSockets 获取数据，现在我想在模板标签的表格中打印所选数据，但我的行在表格中打印为空白，行在增加但数据为空。请让我知道我在哪里弄错了。


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

标签： javascriptlaravelvue.jsv-forlaravel-websockets

解决方案

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

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

推荐阅读