Data that is loaded asynchronously will not display rendered

I have async data loading via jayson from a server. After the data has finished loading, the boolean "loading" is set to false but my content does not re-render. Even though I can see on the console that the data was loaded correctly.

var App = new Vue({
  el: '#app',
  data: {
    title: 'test',
    data: [],
    loading: true
  },
  created() {
    this.getProjectDataFromServer()
  },
  methods: {
    getProjectDataFromServer() {
      client.request('get', null, function(err, response) {
        if(err) throw err;
        this.data = response.result;
        this.loading = false;
        console.log(this.data);
      });
    }
  }
});
<main id='app'>
  <div v-if="loading===false" :key="loading">
    IT WORKS
  </div>
</main>

Answer №1

To ensure the correct context of this is captured, consider using a lambda function instead of a regular function.

getProjectDataFromServer() {
      client.request('get', null, (err, response) => {
        if(err) throw err;
        this.data = response.result;
        this.loading = false;
        console.log(this.data);
      });
    }

Alternatively, you can capture the context of this by creating a closure outside of the function.

getProjectDataFromServer() {
      const that = this;
      client.request('get', null, function (err, response) {
        if(err) throw err;
        that.data = response.result;
        that.loading = false;
        console.log(that.data);
      });
    }

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

How to implement a select all feature using React and MaterialUI

I am facing a challenge with managing multiple sets of checkboxes independently along with a toggle that can switch them all on or off within their respective groups. Each checkbox has two states, and I can identify the checkbox being clicked using event.t ...

Issues with v-on:change not triggering method in nuxt.js

Despite my efforts, I can't seem to get this seemingly simple task to work. I came across a question on Stack Overflow that seemed to address the issue - how to fire an event when v-model changes Here is the component that I am working with: <tem ...

Can the browser tabs automatically detect when a user logs out?

When I have multiple tabs open of the same website in a browser, I wonder how other windows can detect when a user has logged out. My development setup involves using Python/Django. The method I am currently implementing is: function user_checking(){ ...

Utilize jQuery script on every single element

Is there a way to implement a jquery function on elements that are dynamically loaded via ajax? <span class="h">Test</span><br /><br /> <span class="h">Test</span><br /><br /> <span class="h">Test</ ...

AngularJS is unable to properly display (parse) data fetched using $http.get from Laravel5

Working on my SPA project, I have integrated Laravel 5 for database management and used AngularJS for the front-end. All Angular files are stored in the public folder. Instead of displaying a list of users when visiting localhost, it shows: {{ user1.name ...

Displaying the scope in HTML from a custom Angular directive: A step-by-step guide

Just getting started with angular js and I have a question. Is there a way to show the values of e.width and e.height in an HTML document? Can I utilize the scope within this context? .directive( "cropping", [function ($scope) { return { rest ...

Debugging and ensuring the functionality of Cordova (Phonegap) HTTPS connections

There is an HTTPS site with an API that needs to be accessed. I need to work from Cordova (AngularJS) with its HTTPS API. Additionally, I want to debug the AngularJS app in a web browser (Chrome) because it's much quicker compared to rebuilding and ...

When I click the button, I would like the value of the button to be displayed in a textbox

I'm currently working on an interactive virtual keyboard project and need help with a function that will display the pressed button values in a text box located next to the keyboard. Here is the code snippet I've come up with so far: <script ...

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

Obtaining an identification using JQuery for content that is constantly changing

I am currently developing dynamic content tabs using PHP, with one of the objects being a datatable within the tab. In order to define the ID via PHP, I use the following code: PHP: echo '<table class="table table-striped table-bordered table-hov ...

AngularJS: Utilizing angular-filter for grouping by two columns

I may come across as a bit confusing, so please allow me to clarify. Note: An operational piece of code (POC) has been included with this post. I have an array of objects with 3 properties: name name team team_rank $scope.players = [ {name: & ...

Ensure that Angular resolver holds off until all images are loaded

Is there a way to make the resolver wait for images from the API before displaying the page in Angular? Currently, it displays the page first and then attempts to retrieve the post images. @Injectable() export class DataResolverService implements Resolv ...

Decide on the javascript/jquery libraries you want to include

My app is experiencing slow loading times on the home screen and students using it from school district computers are running into ERR_CONNECTION_RESET errors due to strict firewalls. The excessive loading of javascript and jquery libraries in the head of ...

Exploring ways to cycle through dynamically loaded checkboxes with AJAX?

I'm looking to apply a similar function to checkboxes that are loaded dynamically via AJAX: $('input:checkbox').each(function() { $(this).hide(); alert("hi"); $('<div class="checkbox-fx"><div class="che ...

Vue.Js for a Single Page Application utilizing Two Data Sources

Currently, I am working on developing a Single Page Application using vue.js. My project consists of 2 bundles of pages stored in separate S3 buckets - one public and one private. The public bundle is meant to be accessible to all users, while the private ...

Utilize the identical function value within a Vue template

In my template, I am encountering a recurring situation where I need to retrieve a value from a function. This function takes parameters from the template (such as the index of a v-for loop) and returns a result that is then displayed on the template. The ...

I encountered an issue while starting the VueJS build where an error message appeared stating: "Conflict: Multiple assets emit

After updating VueJS this morning, my app started encountering an issue. When I try to build it, an error message pops up stating: Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg Despite there being onl ...

Another option for handling a series of conditional statements instead of a bulky

Can someone help me with a coding issue I'm facing? I have an application that contains a large number of buttons which I need to trigger using keyboard presses. Currently, I am using a switch statement for this purpose. However, as the number of butt ...

The Facebook Like Button appears on Firefox but not on Internet Explorer due to Javascript errors

Hello everyone, I could really use some help with an issue I am facing. My Facebook like button works perfectly fine in Firefox, but when it comes to Internet Explorer, I keep encountering Javascript errors and the button doesn't show up at all: If y ...

When the text for the Rails confirmation popup is sourced from a controller variable, it may not display properly

Attempting to customize my submit_tag confirmation popup within my Rails view, I encounter an issue when trying to utilize an instance variable from the Rails controller. Within the controller, I set up the variable as follows: @confirmation_msg = "test" ...