Display Vue component before fetching data

I am facing an issue where my component renders HTML before fetching data, resulting in no data being displayed until I make an API call within the component using a link rendering function.

Can someone guide me on how to render my component after the data is fetched? I have tried using the v-if condition, but it renders my page without any data. Removing the v-if results in a 'can't read property of undefined' error.


  <div class="score">
          <p class="number">{{company.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>

getStoreScore (condition) {
      return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
      }).then(response => {
        this.company.storeScore = response.data.result
        this.company.amount = {
          'total': response.data.amount.total,
          'zero': {
            'amount': response.data.amount.zero,
            'percentage': (response.data.amount.zero !== 0 ? response.data.amount.zero / response.data.amount.total * 100 : 0)
          },
          'one': {
            'amount': response.data.amount.one,
            'percentage': (response.data.amount.one !== 0 ? response.data.amount.one / response.data.amount.total * 100 : 0)
          },
          'two': {
            'amount': response.data.amount.two,
            'percentage': (response.data.amount.two !== 0 ? response.data.amount.two / response.data.amount.total * 100 : 0)
          },
          'three': {
            'amount': response.data.amount.three,
            'percentage': (response.data.amount.three !== 0 ? response.data.amount.three / response.data.amount.total * 100 : 0)
          }

        }
      })
    }


data () {
    return {
      selected: 1,
      company: {},
      isActive: false,
      test12345: {}
    }
  },

https://i.sstatic.net/584rT.png

Thanks in advance

UPDATE (solved): the company definition were null before like this

data() {
  return{
    company: null
  }
}

this caused problems with rendering out my data. the fix is to define the things in my array i want to use

e.g

data() {
  return{
    company: {
      amount: {
       total: null
      }
    }
  }
}

Answer №1

It's wonderful that you were able to find a solution on your own. Allow me to propose an alternative solution for you. One approach could be using a Boolean variable to achieve the desired outcome. Here's how:

data() {
  return{
    company: null,
    is_data_fetched: false
  }
}

Remember to update this Boolean once the data has been fetched.

getStoreScore (condition) {
    return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
    }).then(response => {
        this.company.storeScore = response.data.result;
        this.is_data_fetched = true;
    });
}

You can then utilize this Boolean to prevent rendering before the data is fetched.

<div class="score" v-if="is_data_fetched">
      <p class="number">{{company.storeScore}} test</p>
      <p class="text">Tilfredhedscore</p>
</div>

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

Creating a RESTful API using Express and Waterline ORM

I am currently working on constructing an API using Express and the Waterline ORM with a mongodb adapter. My main goal for doing this outside of Sails is to gain a deeper understanding of Waterline ORM, which will enable me to contribute to the development ...

Store the decoded user information in the database for safekeeping

I have developed an application where users can capture images and send them to the database with ease. Upon logging in, each user receives a token. As long as the token is valid, they do not need to log in again. To implement JWT authentication, I refer ...

What is the process for attaching an event handler to an element that is displayed after a button click?

I need some assistance with my JavaScript code. I have a page with two links, and when the second link is clicked, certain fields are displayed. I am trying to write an onkeyup() event handler for one of these fields, but seem to be missing something. Here ...

jQuery mobile not recognizing the ID we specified

I am in the process of developing an audio application. My goal is to change the id of the Play button dynamically to "paused" when it is clicked. However, despite my efforts, clicking on the "paused" button does not pause the audio as intended. $(&ap ...

Submit the form and additional information in a single AJAX request in Django

Seeking assistance with a straightforward task. The objective is to utilize AJAX POST to move data from a form along with additional information. The challenge lies in extracting this data from the form later on, as it constitutes an entire line. $(func ...

Can a Vue application be created without the use of vue-cli?

As the title suggests, is it feasible to develop a Vue application using webpack without utilizing the Vue CLI? If not, what is the reason for this? It appears that vue-cli also utilizes webpack to compile their files. ...

JavaScript Inserting a new row into a table right above the last row of the table

Here is the code snippet for my table: Check out my JSfiddle for a live demo. function insert_Row() { var xTable = document.getElementById('partsTable'); var tr = document.createElement('tr'); tr.innerHTML = "<td colspan=2& ...

Error encountered during Ajax request - two files being transmitted instead of one

Can someone assist me with a basic ajax call for a login button? I need help with the form submission and sending the request to a php file to handle the login action. However, I am encountering an issue where two files are being sent instead of one when ...

ways to assign local file path as image url in json

Hey there, I am a new tool for angularjs. Take a look at the json file below: [ { "name": "WORLD", "population": 6916183000, "flagurl":"C:\xampp\htdocs\selva \Flag_of_the_People's_Republic_of_China.svg" }, { "na ...

How can one optimize the speed of an image swap using jQuery or JavaScript?

I seem to have encountered a peculiar issue. In my code, I have the following snippet: http://jsfiddle.net/PMnmw/2/ Interestingly, in the jsfiddle example everything runs smoothly. The image swaps occur swiftly and effortlessly. However, when implemented ...

Adjust the package.json file for deployment

I've encountered a problem while attempting to deploy my nodejs application on Heroku. Despite following the documentation and modifying files in the root directory, I have not been successful. Below is the structure of my package.json file: { ...

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

Executing the beforeRouteLeave navigation guard on a vue component for testing purposes

I am facing a challenge with unit testing the routing behavior of a vue component using jest. Specifically, when navigating away from the component, the 'beforeRouteLeave' guard in Vue-router is not triggering during testing, even though it works ...

Is combining Laravel Blade and Vue to render AJAX data a good idea?

I am trying to implement AJAX rendering of news using Blade and Vue. <div id="news"> <div class="l_news"> <div class="post" v-for="post in posts"> <div class="image" style="background: url({{ asset('images ...

Using Ruby instead of Javascript in lessc

My CSS is compiled in a node application using lessc. LESS was installed via NPM. When I check the current version of lessc --version it shows lessc 1.3.3 (LESS Compiler) [Ruby] 2.3.2 How can I change it to display lessc 1.3.0 (LESS Compiler) ...

Demystifying Iron Ajax: Unraveling the process of parsing an array of JSON objects from a successful

When making an AJAX call to the server, I receive a response in the form of an array of objects as JSON. [{"dms":[{"serialNo":"EG0022","status":"running","firmwareStatus":"ok","latitude":37.8688,"longitude":-144.2093,"toolType":1},{"serialNo":"EG0022","st ...

perform an action if any division element is void of content

Currently, I have a statement that checks if any of the Divs with the ID #Drop are empty. If one is found to be empty, an alert is shown. However, there seems to be an issue where the statement stops working when any div contains content. What I am trying ...

Trouble with IFormCollection not retrieving individual form data

I've been working on an asp.net core MVC project where I encountered a requirement to add dynamic fields to a view that already has a form with static fields. These dynamic fields are fetched from the database and need to be submitted along with the s ...

Varied elevations dependent on specific screen dimensions

There seems to be a minor issue with the height of the portfolio container divs at specific window widths. The problematic widths range from 1025 to 1041 and from 768 to 784. To visualize this, try resizing your browser window to these dimensions on the fo ...

Identifying Changes in ReactJS Pages

As I delve into learning ReactJS, I have been experimenting with various websites that utilize this technology. Presently, my focus is on making an AJAX call to an API based on the URL of a page. The issue arises when clicking a link breaks my code due t ...