CODEWITHSUNDEEP
laravel-5vuejs2
bgul
bgul

Reputation: 146

VueJS: v-for directive is not rendering items in spite of having objects in array

I am trying to render my API response object into the table rows. There is no problem with endpoints. I could fetch data without any issues. Data is paginated. I can see the content of the array object(by using double curly braces). But v-for direction doesn't affect anything.

I tried some ways to fix. One of them is using response.data.data to handle it but it didn't work. I also tried iterating through customers.data but I got the same results.

This part was taken from my component 

import axios from 'axios'

export default {
    data () {
        return {
            customers: [],
        }
    },

    mounted: function() {
        axios.get('http://127.0.0.1:8000/customer/all').then(res => {

            this.customers.push(res.data);

        });
    },

Here it is the directive part:

 <tr v-for="customer in customers">
     <td>
         <input class="uk-checkbox" type="checkbox">
     </td>
     <td>{{ customer.mail }}</td>
     <td>
        {{ customer.telephone }}
     </td>
     <td>
         <ul class="uk-iconnav">
            <li><span class="uk-icon" uk-icon="icon: check"></span></li>
            <li><span class="uk-icon" uk-toggle="target: #user-request" uk-icon="icon: question"></span></li>
            <li><span class="uk-icon" uk-icon="icon: trash"></span></li>

         </ul>
      </td>
  </tr>
  {{ customers }} => this is OK

customers json output

[ { "current_page": 1, "data": [ { "id": 1, "user_info": "test", "password": "test", "gsm": "123123213", "telephone": 124, "mail": "test@test", "address": "test", "created_at": null, "updated_at": null } ], "from": 1, "last_page": 1, "next_page_url": null, "path": "http://127.0.0.1:8000/customer/all", "per_page": 4, "prev_page_url": null, "to": 1, "total": 1 } ]

It should be rendered, but it's not rendering. I didn't get any console errors. What is the problem? Thanks anyway.

Upvotes: 0

Views: 94

Answers (1)

Murat
Murat

Reputation: 1205

In your snippet, res.data is an array that contains an object with a data attribute that has for value the customer data you want to display.

To store the retrieved customer data values in your component's customers array you can spread them as the following :

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers.push(...res.data[0].data);
   });
}

If the customers array as no other modification source, you can even do :

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers = res.data[0].data;
   });
}

Upvotes: 1

Related Questions