(vuejs) Array undefined with axios and quasar

Question

I have a problem with an array that is undefined while in Vuejs devTool I see it full. Here is what I did with quasar: When i click on my update button i want to display a q-card with input of my row. So i have make a request with axios and put response in array. But i have 'undefined' when i do a console.log() of my array.

<template>
    <div>
        <div class="q-pa-sm q-gutter-sm">
            <q-dialog v-model="show_dialog" v-bind:programmeEdit="programmeEdit">
            <q-card>
              <q-card-section>
                <div class="text-h6">Add new item!</div>
              </q-card-section>
     
              <q-card-section>
                <div class="row">
                  <q-input  v-model="programmeEdit.prg_libelle" label="prg_libelle"></q-input>
                  <q-input  label="id"></q-input>
                   <q-input  label="nom promotteur"></q-input>

                  <q-input  label="date commercialistion"></q-input>
                  <q-input  label="stock initial"></q-input>
                  <q-input  label="nombre tranche"></q-input>
     
     
                </div>
              </q-card-section>
               
              <q-card-actions align="right">
                <q-btn flat label="OK" color="primary" v-close-popup @click="" ></q-btn>
              </q-card-actions>
              </q-card>
        </q-dialog>
              </div>
         
        <q-table title="Programme" :filter="filter" :data="programme.data" :columns="columns" row-key="name">
            <template v-slot:top-right>
                <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
              </template>
            
                  <template v-slot:body="props">
              <q-tr :props="props">
              
          <q-td key="prg_libelle" :props="props">{{ props.row.prg_libelle }}</q-td>
          <q-td key="id" :props="props">{{ props.row.id }}</q-td>
          <q-td key="nom_promotteur" :props="props">{{ props.row.act_libelle }}</q-td>
          <q-td key="id_promotteur" :props="props">{{ props.row.id_promotteur }}</q-td>
          <q-td key="date_commercialisation" :props="props">{{ props.row.tra_date_commercialisation }}</q-td>
          <q-td key="stock_initial" :props="props">{{ props.row.tra_stock_initial }}</q-td>
     
          <q-td key="nombre_tranche" :props="props">{{ props.row.nombre_tranche }}</q-td>
        <q-td key="actions" :props="props">
                  <q-btn color="blue" label="Update" @click="getProgramme(props.row.id)" size=sm no-caps></q-btn>
                  <q-btn color="red" label="Delete"  @click="deleteItem(props.row)" size=sm no-caps></q-btn>
                </q-td>
              </q-tr>
            </template>
     
        </q-table>
     
          </div>
    </template> 

Vue.use(VueAxios, axios)
export default {
   
  methods: {
  },
  data () {
    return {
      programmetoEdit:'',
      show_dialog:false,
      filter: '',
      programme:{},
      programmeEdit:{},
      columns: [
        {
          name: 'prg_libelle',required: true, label: 'prg_libelle',align: 'left', field: 'prg_libelle' ,format: val => `${val}`, sortable: true },
        { name: 'id', align: 'center', label: 'id', field: 'id',  sortable: true },
        { name: 'nom_promotteur', align: 'center',label: 'nom_promotteur', field: 'act_libelle', },
        { name: 'id_promotteur', align: 'center',label: 'id_promotteur', field: 'id_promotteur', },
        { name: 'date_commercialisation', align: 'center',label: 'date_commercialisation', field: 'tra_date_commercialisation', },
        { name: 'stock_initial', align: 'center',label: 'stock_initial', field: 'tra_stock_initial', },
        { name: 'nombre_tranche', align: 'center',label: 'nombre_tranche', field: 'nombre_tranche', },
        { name: "actions", label: "Actions", field: "actions"},
      ]
    }
  },
 
    created() {
      axios.get("http://localhost:80/api/programme")
      .then(response =>this.programme=response)
      .catch(error=>console.log(error))
    },
  methods: {
    getProgramme($id){
    axios.get("http://localhost:80/api/programme/"+$id)
    .then(response => this.programmeEdit=response.data);
    this.show_dialog= !this.show_dialog;
    this.programmeEdit.id=this.programmetoEdit;
     
  }
  },
   
}

I get an undefined when I want to retrieve the query according to the id. I'm blocking and I don't know why. thanks a lot:)

Answer 1

If you want to log it from your code (like in the .then promise, for example) you should do:

console.log(this.programmetoEdit);

Moreover, you are doing assignment in parallel of the job Axios is doing. Not after, as I guess you are expecting it to do.

You should drop all your stuff in the .then promise if you want it to happen after the this.programmeEdit=response.data part.

Like so (this will show the dialog WHILE loading the data/waiting for the API to respond):

    getProgramme ($id) {
    axios.get("http://localhost:80/api/programme/" + $id)
      .then(response => {
        this.programmeEdit=response.data;
        this.programmeEdit.id=this.programmetoEdit;
      });
      this.show_dialog= !this.show_dialog;
    }

Or like so (this will show the dialog AFTER loading the data/waiting for the API to respond):

    getProgramme ($id) {
    axios.get("http://localhost:80/api/programme/" + $id)
      .then(response => {
        this.programmeEdit=response.data;
        this.programmeEdit.id=this.programmetoEdit;
        this.show_dialog= !this.show_dialog;
      });
    }