To ensure the spinner appears before a component mounts and hides after an AJAX request is complete, I am utilizing the yuche/vue-strap spinner. This spinner is positioned in the parent days.vue template immediately preceding the cycles.vue template.
The structure of the days.vue template is as follows:
<template>
<accordion :one-at-a-time="true" type="info">
<panel :is-open="index === 0" type="primary" :header="'Day ' + day.day" v-for="(day, index) in days" :key="day.id">
<accordion :one-at-a-time="true" type="success">
<panel is-open type="success" header="Cycles">
<spinner :ref="'cycles_spinner_' + day.id" size="xl" text="Loading cycles..."></spinner>
<cycles
:day="day"
>
</cycles>
</panel>
</accordion>
</panel>
</accordion>
</template>
<script>
export default {
props: [
'plan'
],
data() {
return {
days: {}
}
},
beforeMount: function () {
var self = this;
axios.get('/plans/' + this.plan.id + '/days/data')
.then(function (response) {
self.days = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
</script>
The content of the cycles.vue template is shown below:
<template>
<accordion :one-at-a-time="true" type="info">
<panel :is-open="index === 0" type="primary" :header="'Week ' + cycle.week + ': ' + cycle.name" v-for="(cycle, index) in cycles" :key="cycle.id">
<form v-on:submit.prevent="update">
....misc input fields here...
</form>
</panel>
</accordion>
</template>
<script>
export default {
props: [
'day'
],
data() {
return {
cycles: []
}
},
beforeMount: function () {
var self = this;
this.$parent.$refs['cycles_spinner_' + this.day.id].show();
axios.get('/plans/days/' + this.day.id + '/cycles/data')
.then(function (response) {
self.cycles = response.data;
this.$parent.$refs['cycles_spinner_' + this.day.id].hide();
})
.catch(function (error) {
console.log(error);
});
}
}
</script>
Attempting to use
this.$parent.$refs['cycles_spinner_' + this.day.id].show();Cannot read property 'show' of undefinedA similar error occurs when using
this.$refs['cycles_spinner_' + this.day.id].show();