I get an array on axios response but an empty __ob__: Observer in the watcher

Hello

I’m usign a watcher to have the data dynamically, the consol.log on the methos gives me thas result:

image

And on the watcher this result:

image

I wanna use the unites but it’s like an undefined

The Watcher

watch: {

    matiere_id() {

      this.i = 0

      if (!this.i) {

        this.unites = []

      }

      for (let i = 0; i < this.matiere_id.length; i++) {

        this.getMatiereUnites(this.matiere_id[i])

        console.log(this.unites);

      }

    },

The Method

async getMatiereUnites(matiere_id) {

      try {

        const response = await axios.get('/admin/matieres/' + matiere_id + '/unites', {

                        headers: {

                          'Access-Control-Allow-Origin': '*',

                          'Accept': 'application/json',

                          'Authorization': `Bearer ${localStorage.getItem('userToken')}`

                        }

        })

        this.unites[this.i] = response.data.data

        console.log(this.unites);

        this.i++

      } catch (e) {

        console.log(e.response);

      }

    },

you need to await this call.

it’s working thanks a lot.
I have an other question please?

Is it possible to put in the index of the first v-for as an index of the array in the second v-for?

<vs-row :key="index"  v-for="(matiere_index, index) in matiere_id">
  <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="6" class="p-3">
    <vs-select
    :placeholder="matiereFiliereName(matiere_index, 0)"
    autocomplete
    width="100%"
    v-model="unite_id[index]">
      <vs-select-item :key="index_2" :value="unite.unite_id" :text="unite.unite_name" v-for="(unite, index_2) in unites[index]" />
    </vs-select>
  </vs-col>
  <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="6" class="p-3">
    <vs-input
      placeholder="Ordre"
      autocomplete
      width="100%"
      v-model="cours_order[index]"/>
  </vs-col>
</vs-row>

uhm … yes. what’s not working?

It’s gives me an emty liste.

It’s gives me an empty array because when I use parameter i in th for loop a can have the results but when I use the parameter i defined in the instance I have an undefined.

async matiere_id() {

  this.i = 0
  if (!this.i) {

    this.unites = []
  }
  for (let i = 0; i < this.matiere_id.length; i++) {
    console.log(this.i);
    console.log(i);
    await this.getMatiereUnites(this.matiere_id[i])
    console.log(this.unites[this.i]);
    console.log(this.unites[i]);
  }
},

The picture below shows you the results of console.log
Capture