[Vuejs]-Show/hide a vue-strap spinner from parent or child component

0👍

refs inside v-fors generate arrays. From the docs (emphasis mine):

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

So instead of:

this.$parent.$refs['cycles_spinner_' + this.day.id].show();

You should do:

this.$parent.$refs['cycles_spinner_' + this.day.id][0].show();

The index is 0 because you are creating only one ref named 'cycles_spinner_' + this.day.id per iteration.

Inside axios promises, same issue (and beware of this)

Inside your axios .then() you’ll face the same problem. Also, inside .then(function (response) { don’t use this, use self:

axios.get('/plans/days/' + this.day.id + '/cycles/data')
  .then(function(response) {
    self.cycles = response.data;
    self.$parent.$refs['cycles_spinner_' + this.day.id][0].hide();
//  ^^^^---------------- changed ----------------------^^^
  })
  .catch(function(error) {
    console.log(error);
  });

Leave a comment