A "TypeError" occurred because the property "$on" of undefined was unable to be read in the q-ajax-bar

Quasar Version: v0.17.2

Node Version: v9.4.0

NPM Version: 5.6.0

While working on my project, I am trying to manipulate the ajax bar using start/stop events. However, an error occurs when my App.vue file is being rendered.

Error Message in mounted hook: TypeError: Cannot read property $on of undefined

Here is a snippet of the template:

<q-ajax-bar ref="loadingBar" :delay="delay" :speed="speed" :color="color" />

And here is the script section where the error happens:

this.$refs.loadingBar.$on('stop', () => {
      console.log("ajax-bar stop");
    });
this.$refs.loadingBar.$on('start', () => {
       console.log("ajax-bar start");
      }
    });

If anyone has any ideas on how to fix this issue, your help would be greatly appreciated!

Answer №1

Consider utilizing the @start and @stop commands.

Feel free to reach out if you have any questions!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Countdown Timer Programming

I've scoured countless resources, but most of them only provide code for counting down to a specific day. I'm reaching out in the hopes that someone can assist me by crafting some JavaScript for the following HTML structure. This section of my w ...

What is the method for extracting style attributes from HTML using JavaScript?

Is there a way to extract only the applied CSS rules to a DOM node using JavaScript? I am familiar with getComputedStyle, but it retrieves all styles, not just those applied from stylesheets, inline styles, or injected into the CSSOM. The technique I hav ...

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

Button for liking posts on Facebook made of titanium

I am attempting to publish a like for a page from my Titanium Alloy application. var fb = require('facebook'); fb.appid = "1234567890"; fb.permissions = ['public_profile', 'email', 'publish_actions']; fb.addEventLi ...

What is the best way to modify the :class name in a view file using a component in Vue?

I am currently facing an issue with implementing two active themes, a light-theme and a dark-theme, within an external button component. I have been successful in making it work by embedding the code and function directly inside the view. While this setup ...

Sending data to mongodb using the fetch API and FormData method is a simple process that involves constructing

I have been trying to send data to mongoDB using the fetch API along with FormData, but encountering an error: POST https://xxxxxxxxxxxxxxxxxxxxxxxx/upload 500 (Internal Server Error) The form data in my EJS file appears as follows: <div id=" ...

Discover the most concise string within the array

Is there a way to determine the shortest string in a JavaScript array regardless of the number of elements it contains? I attempted using var min = Math.min(arr[0].length,arr[1].length,arr[2].length); to find the shortest string among 3 elements in an ar ...

Leverage the most up-to-date vue-eslint-parser - encore for improved

I successfully integrated ESLint with Encore (Symfony). In my .eslintrc.js file, I have configured it as follows: module.exports = { "parser": "vue-eslint-parser", "parserOptions": { "parser": "babel-eslint", "ecmaFeatures": { ...

Changing the click event using jQuery

My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...

Unable to implement new ecmascript decorators within typescript version 2.4.2

Check out this example code: function enumerable(value: boolean) { return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { descriptor.enumerable = value; }; } class A { @enumerable(false) a: number = 1 b: number ...

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

Is it possible to execute a program on MacOS through a local HTML website?

Are there any straightforward methods to launch Mac programs using HTML? I've created an HTML page featuring a text field and several buttons. The goal is for users to enter a code (numbers) that will then be copied to the clipboard. By clicking on t ...

When using Vuetify's v-text-field with the type "number", remember to assign a null value instead of an empty string

One issue I've encountered is that when using v-text-field with the type="number" attribute, the value is set to an empty string after manual clearing. Ideally, I would like it to return null in such instances. Is there a way to set an attr ...

I am having trouble establishing a connection between my Node.js server and the Google Cloud Platform server

I've been working on a global ESP32 Cam project, aiming for worldwide connectivity. I came across a tutorial that has been my guide: https://www.youtube.com/watch?v=CpIkG9N5-JM. I followed all the steps in the tutorial diligently, but unfortunately, I ...

Issue with data not being transferred to Vue component

I am currently working on a Vue component that receives an array of 'items' from its parent. These items are then categorized with two items in each category: computed: { // sort items into categories glass: function() { ...

Struggling to insert HTML into an element using JavaScript or jQuery within a function

I'm currently experimenting with implementing smooth page transitions using Barba. The following is my code snippet for adding some HTML when a new page is loaded. Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, conta ...

Ordering results based on function output within a v-for loop in Vue.js

In my code, I have an array that I am looping through in the following way: <template v-for="plan in plans"> ... </template> My goal is to sort the plans array by a calculation based on certain properties of each plan. Let's ...

Tips for eliminating Blank Attributes from a multi-level JavaScript Object

Here is a JavaScript object example: var test = {"code_operateur":[""],"cp_cult":["",""],"annee":["2011"],"ca_cult":[""]} After running a function on it: for (i in test) { if ( test[i] == "" || test[i] === null ) { delete test[i]; } ...

Encountering an Issue: The program is throwing a TypeError because it is unable to access properties of null when trying to read '

My goal is to upload an excel file using ng-click and the fileUpload($event) function defined in the app controller scope. I am utilizing xlsx to read the file in JSON format, but I encounter an error when running the code: <div> <input id ...

Concealing a hyperlink depending on the value chosen in a dropdown menu

Looking for guidance on how to use jQuery to read the current value of a drop-down list and hide a specific link based on that value. The drop-down list is for selecting the language/locale. For example, when "English" is selected, I want the link to be h ...