Vue/Nuxt - Watch / computed length of array from a vue plugin

Question

I want to display the length of an array in my vue component. The array is nested in a vue plugin.
Everytime I start an API Call I 'push' a new element in this array found here: this.$apiCall.apiCallCache

Is this possible to watch for changes on this array? Am I doing something wrong in the example below?

I only get 0 the hole time. But if I click on the button and trigger logApiCache() it will console.log the right length of the array while the computed function still shows 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)

Thanks for the help. :)

Could you share the code in your plugin? I think it could be useful. Also which version of Nuxt are you using? — sebasaenz
Thanks for your help. :) I added the files above, Here my version: "nuxt": "2.12.2". The importan part for my array I want to watch is in addCall > this.apiCallCache.push({ ... }) — borsTiHD
Vue doesn’t keep a copy of the pre-mutate value so the issue might be that you are pushing data into an existing array instead of creating a new one and updating it with exisiting and new data. — Steven Kuipers
What exactly do you mean by that? I'm a little lost. In my Vue plugin I create an instance from my ApiClass. Then I bind this instance to my Vue object, so I can access it with this.$apiCall. Now, if I start a request/api call in an seperate component, I just call this.$smcApiCall.addCall(request, callback). The addCall function then pushs a new object into an array of the class property. — borsTiHD
Even if I manually "push" data to this array, my computed function will not update my span element. But again, in the console.log is the right length as you see in this picture: link — borsTiHD

borsTiHD borsTiHD · Accepted Answer · 2020-07-27T14:27:53

Alright... after a long search session I found a solution.
First step was adding a new property in my footer component mentioned above with a default value, apicalls: null for example. After that, I made a created() part in my component and linked the local property apicalls to this.$apiCall.apiCallCache and it was reactive. My computed function worked now.

After that I found an even simpler solution. I just need to assign my vue plugin in a different way Vue.observable(api):

import Vue from 'vue'
const ApiClass = require('../classes/ApiClass')
const api = new ApiClass()

// Export Vue Plugin
const ApiCalls = {
    install(Vue) {
        Vue.prototype.$apiCall = Vue.observable(api)
    }
}

Vue.use(ApiCalls)

Can someone please explain me, why this new way makes my array reactive, but not my first way?

Vue/Nuxt - Watch / computed length of array from a vue plugin

1 Answers