In the process of developing a native hybrid app with Nuxt JS 2.9.1 and Vuetify JS, I have integrated a notification component into my layout file default.vue. This component is essential for triggering notifications via a Cordova plugin on every page.
During the HTTP GET request to a server on each page (using Axios), it becomes necessary to access a specific object from an array based on its index. However, due to method constraints, direct access to individual object indexes is not possible. As a workaround, I've created a hidden <div> that contains references to each object correlated with the current URL. By utilizing the ref, these references are accessible within my methods.
Despite the functionality working correctly, errors like
Cannot read property '$refs' of undefinedCannot read property 'innerText' of undefined<template>
// Vue template code here
</template>
<script>
// Vue script code here
</script>
The above snippet illustrates my notification component embedded within each view. To address the error scenarios, suggest alternative optimization strategies or potential enhancements that can be implemented.