v-for not working even when variable has object array assigned to it

Question

                    <tbody>
                        <tr v-for="invoice in invoices">
                            <td>Holder</td>
                            <td>{{invoice.firstname}} {{invoice.lastname}}</td>
                            <td>{{invoice.telephone}}</td>
                            <td>{{invoice.email}}</td>
                            <td>{{invoice.payment_adress_1}} {{payment_country}} {{payment_postcode}}</td>
                            <td>{{invoice.shipping_address}} {{shipping_country}} {{shipping_postcode}}</td>
                            <td>{{invoice.comment}}</td>
                            <td>Holder</td>
                            <td>{{invoice.payment_method}}</td>
                            <td>Holder</td>
                            <td>Holder</td>
                            <td>Holder</td>
                        </tr>
                    </tbody>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    invoices: []
                }
            },
            methods: {
                OnLoad() {
                    axios.post('invoiceConfig.php', {
                        request: 3
                    })
                    .then(function(response){
                        console.log(response.data)
                        this.invoices = response.data
                        console.log(this.invoices)
                    })
                    .catch(function(error){
                        console.log(error);
                    });
                }
            },
            beforeMount(){
                this.OnLoad()
            }
        })
        const vm = app.mount('#app');

invoiceConfig.php is used to extract data from a database, for some reason, when console logging the response, an object array is seen, but when trying to v-for to add rows to table corresponding to the amount of objects in the list, it simply doesnt work. Anyone has any idea why?

Vue.set could help you [Vuejs and Vue.set(), update array](https://stackoverflow.com/questions/42807888/vuejs-and-vue-set-update-array) — Peter Krebs, May 09 '22 at 08:07

score 1 · Answer 1 · answered May 09 '22 at 07:10

Try the same using computed

 <tbody>
   <tr v-for="(invoice, index) in getInvoices" :key="index"> <!-- Change added in this line -->
                            <td>Holder</td>
                            <td>{{invoice.firstname}} {{invoice.lastname}}</td>
                            <td>{{invoice.telephone}}</td>
                            <td>{{invoice.email}}</td>
                            <td>{{invoice.payment_adress_1}} {{payment_country}} {{payment_postcode}}</td>
                            <td>{{invoice.shipping_address}} {{shipping_country}} {{shipping_postcode}}</td>
                            <td>{{invoice.comment}}</td>
                            <td>Holder</td>
                            <td>{{invoice.payment_method}}</td>
                            <td>Holder</td>
                            <td>Holder</td>
                            <td>Holder</td>
  </tr>
</tbody>
<script>
        const app = Vue.createApp({
            data() {
                return {
                    invoices: []
                }
            },
            // change added below
            computed: {
             getInvoices() {
               return this.invoices.length ? this.invoices : [];
             }
            },
            methods: {
                OnLoad() {
                    axios.post('invoiceConfig.php', {
                        request: 3
                    })
                    .then(function(response){
                        console.log(response.data)
                        this.invoices = response.data
                        console.log(this.invoices)
                    })
                    .catch(function(error){
                        console.log(error);
                    });
                }
            },
            created(){ // change added
                this.OnLoad();
            }
        })
        const vm = app.mount('#app');

hi, thanks for the help, unfortunately, this does not work, I'm really pulling out my hair right now!!! HAHAHA, everything seems correct to me! — Darrell Ng, May 09 '22 at 07:16

score 1 · Accepted Answer · answered May 09 '22 at 08:10

Okay I don't know how this works but, changing .then(function(response)... to .then(response)=>... in the OnLoad() method fixed it. I guess this is not recognized in an inner function? I followed this guide to solve it: Axios can't set data, first answer!

score 1 · Answer 3 · answered May 09 '22 at 10:31

Ideally your code should work, I just created a below code snippet by adding some time out to see if beforeMount() is binding the data in the DOM after some interval or not but it is working.

Are you getting any error in console ? Can you please try with some dummy/mock response to debug the actual root cause.

Demo :

new Vue({
  el: '#app',
  data: {
    invoices: []
  },
  beforeMount() {
    this.OnLoad();
  },
  methods: {
    OnLoad() {
      setTimeout(() => {
        this.invoices = [{
          id: 1,
          name: 'Invoice 1'
        }, {
          id: 2,
          name: 'Invoice 2'
        }, {
          id: 3,
          name: 'Invoice 3'
        }]
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
  <thead>
    <th>ID</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr v-for="invoice in invoices" :key="invoice.id">
      <td>{{ invoice.id }}</td>
      <td>{{ invoice.name }}</td>
    </tr>
  </tbody>
  </table>
</div>

v-for not working even when variable has object array assigned to it

3 Answers3