Display visual information without requiring the parameters to be filtered beforehand in vue.js

Upon opening my page, I encountered an issue where the graphics appear blank. This is because I set up the callback for generating graphic data through params request.

I wish to first fetch the general data when the page opens, and only load with params when a filter is applied

Unfortunately, I am unsure of the approach to take in this scenario

     mounted() {
        this.refresh()
 },
 methods: {

      refresh () {
         this.$axios.get()
         var situacao = this.situacao.map(st => st.id)
         var cliente = this.cliente.id
         var especialidade = this.especialidade.id
         var tipo = this.tipos.id
         var helpDesk = this.helpDesk.id
         var supervisor = this.supervisor.id

         var params = {
                tipo: tipo,
                situacao: situacao,
                cliente: cliente,
                helpDesk: helpDesk,
                especialidade: especialidade,
                supervisor: supervisor     
         }

         this.$axios.get("/Operacional/GetRelatorio/?" + qs.stringify( params, { arrayFormat: 'repeat' }))
         .then(res => { 
            this.prazos = res.data
            this.$refs.chart1.updateSeries([{
                name: 'NO PRAZO',
                data: [this.prazos.noPrazo, this.prazos.emDia, this.prazos.atrasadas]
             }])
          })

My aim is to trigger the params only upon selecting a filter. Otherwise, I want to make a normal GET request without any params so that the graphics do not show as blank once the page is loaded

Answer №1

To implement filtering functionality in your component, utilize the data() property to define a variable with an initial value of false.

data () {
return {
isFilterApplied: false;
}
}

When the filter is selected, simply update the data property to true. Based on the value of this property, you can send the request either with or without parameters.

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

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

I am currently working on a one-page website project to enhance my Angular skills, and I'm facing a challenge with animating multiple DOM elements using a single animation. Defining the animation for each element individually seems like a cumbersome a ...

Problem: Vue 3 build does not generate service worker

After adding the "@vue/cli-plugin-pwa": "^4.5.12" to my package.json and setting up workbox configuration in my vue.config.js, I encountered an issue. When running npm run build:prd with the script vue-cli-service build --mode prod.exam ...

Reactjs Promise left hanging in limbo

How can I resolve the pending status of my promise? I have a modal with a form submit in it, where I am trying to retrieve the base64 string of a CSV file. While my code seems to be returning the desired result, it remains stuck in a pending state. c ...

Unable to show image when utilizing props to hold the source on Vue.js

During this recent project, I attempted to create an image component that would display an image based on a string prop. Below is the code for my component: Here is the component: <template> <div class="Img-grid"> <di ...

"Data passed to a JavaScript callback function may result in an undefined

I've been experiencing some issues with callbacks and getting return data as undefined. function goodMorning(name, msg) { return `${name} ${msg}`; } function greet(name, msg, cb) { const myName = "Sairam"; console.log(`${cb(name)} ${cb(msg)} ...

Enhance your Wordpress posts with a custom pop-up form for each individual button

On a page, there are various custom posts being displayed with the post type 'property', each containing a button: <button class="btn btn-primary">Submit Offer</button> This button is looped and shown below every post. What ...

Guide to retrieving the data type of a List Column using SharePoint's REST API

I am currently attempting to determine the type of columns in my SharePoint list so that I can accurately populate a form with the appropriate field types. During my research, I stumbled upon this informative article in the documentation which discusses ac ...

What is the process of sending data to another JSP page via AJAX when submitting data to a link within a JSP page?

I am facing an issue with forwarding data from a URL link in a JSP form page to another JSP page after submitting the form. How can I achieve this successfully? index.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

Encountering a 400 error when utilizing the Google Translate free API with Curl

I am attempting to utilize the free Google Translate API that is derived from Firefox's S3 Google Translator addon, by incorporating the following code: https://translate.google.com/translate_a/single?client=t&sl=auto& tl=en&hl=en&dt= ...

Can you suggest a method using Lodash to remove specific rows from an array based on the value of a certain field within the array?

Currently, I am utilizing the following function: remove: function (arr, property, num) { for (var i in arr) { if (arr[i][property] == num) arr.splice(i, 1); } }, Although this functi ...

Having troubles with your jQuery script on Internet Explorer?

I am facing an issue with my script. It is located in an external file and called at the beginning of my HTML page. The script involves an Ajax request that constantly checks a database for updates. When an update is detected, it triggers a specific functi ...

Using ng-disabled on input elements within an ng-repeat directive

Showing different inputs based on an array looks like this <div data-ng-repeat="n in langInput.values"> <input type="text" id="auction_name_{{n.selected}}" class="form-control" name="auction_name_{{$index}}" ...

Filtering Quantity Based on Specific Attribute in ReactJs

I want to implement a quantity filter that can be based on color, size, or both. For instance, when I select the red color, it should display the total quantity of red items available. However, if I choose both the color red and size small, it should show ...

Encountering issues with Monaco Editor's autocomplete functionality in React

I'm facing an issue with implementing autocomplete in the Monaco Editor using a file called tf.d.ts that contains all the definitions in TypeScript. Despite several attempts, the autocomplete feature is not working as expected. import React, { useRef, ...

The text color remains the same even after the method has returned a value

I have a vuex query that returns a list of books. I want to display each book with a specific color based on its status. I tried using a method to determine the color name for each book and bind it to the v-icon, but it's not working as expected - no ...

What are the best practices for implementing serialization in NestJS?

Recently, I delved into a fresh NestJs project and encountered a hurdle while trying to integrate serialization. The goal was to transform objects before sending them in a network response. Initially, everything seemed to be working smoothly until I attemp ...

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...