v-for loop print empty row after run

Question

I am working on vue component file, I fetched data through laravel WebSockets, now I want to print the selected data in a table in the template tag, but my rows are in the table printed blank, rows are increasing but with empty data. please let me know where I am mistaken.


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

Also, what does this import `import Echo from "laravel-echo";` do if you are using `window.Echo` inside your code? — Adarsh Mohan, Mar 15 '21 at 09:51
@AdarshMohan console.log(this.Items) is getting data in json format. — Parteek Kumar, Mar 15 '21 at 10:04
is it in the expeted format ? either `{ key1:{ }, key1: { } ... }` or `[ { }, { } ... ]` ? — Adarsh Mohan, Mar 15 '21 at 10:05
@AdarshMohan yes, my data is fetched perfectly according to format, but after fetch data from the table, when i used to print it it shows an empty row. — Parteek Kumar, Mar 15 '21 at 10:14
there might be some data where you are not having the required object in it. — Adarsh Mohan, Mar 15 '21 at 10:15

score 0 · Answer 1 · edited Mar 15 '21 at 19:52

0

My problem is solved, i need to push data into variable, not need to assign to it.

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

edited Mar 15 '21 at 19:52

Saeed

3,294
5
35
52

answered Mar 15 '21 at 10:38

Parteek Kumar

69
5

2

this depends on the requirement, you will need to push it if you want more data over your current one, and assign it if you want them to be replaced. anywhay glad to see that you solved it – Adarsh Mohan Mar 15 '21 at 10:54

v-for loop print empty row after run

1 Answers1