I am trying to show the length of an array within my Vue component. The array is nested within a Vue plugin.
Each time I initiate an API Call, I add a new element to this array located here: this.$apiCall.apiCallCache
Is it possible to monitor changes in this array? Am I making a mistake in the example provided below?
I am consistently seeing 0. However, if I click the button and trigger logApiCache(), it correctly logs the array's length, while the computed function still displays 0 in the span element / tooltip.
<template>
<v-footer
app
tile
>
<span>Queue: {{ footerClockTooltip() }}</span>
<app-footer-button
:name="'Clock'"
:tooltip="footerClockTooltip()"
:icon="$icons.mdiClockOutline"
@click="logApiCache"
/>
</v-footer>
</template>
<script>
export default {
name: 'Footer',
computed: {
/*
footerClockTooltip() {
return this.$apiCall.apiCallCache.length
}
*/
},
methods: {
logApiCache() {
this.$forceUpdate()
console.error(`logApiCache: ${this.$apiCall.apiCallCache.length}`, this.$apiCall.apiCallCache)
},
footerClockTooltip() {
console.error('New Queue:', this.$apiCall.apiCallCache.length)
return this.$apiCall.apiCallCache.length
}
}
}
</script>
Edit:
Here is my Vue plugin:
import Vue from 'vue'
const ApiClass = require('../classes/ApiClass')
const api = new ApiClass()
// Export Vue Plugin
const ApiCalls = {
install(Vue) {
Object.defineProperties(Vue.prototype, {
$apiCall: {
get() {
return api
}
}
})
}
}
Vue.use(ApiCalls)
Thank you for your assistance. :)