Vue JS encountering issues in rendering method's returned data on DOM

Question

Vue JS encountering issues in rendering method's returned data on DOM

HTML Template

<div class="item" v-for="n, index in teamRoster">
   <span> {{ getFantasyScore(n.personId) }} </span>
</div>

Function

getFantasyScore(playerId) {
    if(playerId) {
        axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + playerId)
        .then( (response) => {
            if( response.status == 200 ) {
                console.log(response.data.total)
                return response.data.total;
            }
        });
    }
}

I am facing an issue where the data returned is not being displayed on the DOM. However, when I try to log it in the console, it shows up. What could be causing this and how can I rectify it?

javascript vue.js frontend vuejs2 vue-component

Answer 1

Answer №1

It seems like the issue lies in your getFantasyScore method as it does not have a return value and the data is asynchronous rather than reactive.

To address this, I would suggest creating a new component that fetches the data upon creation. Here's an example:

Vue.component('fantasy-score', {
  template: '<span>{{score}}</span>',
  props: ['playerId'],
  data () {
    return { score: null }
  },
  created () {
    axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + this.playerId)
      .then(response => {
        this.score = response.data.total
      })
  }
})

Once you have defined the component, you can use it in your template like this:

<div class="item" v-for="n, index in teamRoster">
  <fantasy-score :player-id="n.personId"></fantasy-score>
</div>

Answer 2

It seems like the issue lies in your getFantasyScore method as it does not have a return value and the data is asynchronous rather than reactive.

To address this, I would suggest creating a new component that fetches the data upon creation. Here's an example:

Vue.component('fantasy-score', {
  template: '<span>{{score}}</span>',
  props: ['playerId'],
  data () {
    return { score: null }
  },
  created () {
    axios.get(config.NBLAPI + config.API.PLAYERFANTASYSCORE + this.playerId)
      .then(response => {
        this.score = response.data.total
      })
  }
})

Once you have defined the component, you can use it in your template like this:

<div class="item" v-for="n, index in teamRoster">
  <fantasy-score :player-id="n.personId"></fantasy-score>
</div>

Answer 3

Answer №2

Avoid using AJAX methods to handle asynchronous results. It is recommended to first fetch the complete teamRoster object and then insert it into your div:

<div class="item" v-for="fantasyScore in teamRoster" v-if="teamRoster">
   <span> {{ fantasyScore }} </span>
</div>

Answer 4

Avoid using AJAX methods to handle asynchronous results. It is recommended to first fetch the complete teamRoster object and then insert it into your div:

<div class="item" v-for="fantasyScore in teamRoster" v-if="teamRoster">
   <span> {{ fantasyScore }} </span>
</div>

Vue JS encountering issues in rendering method's returned data on DOM

Answer №1

Answer №2

Similar questions

The correct method for including a CSS file in a Vue.js application

tips for incorporating jade Mixin in JavaScript

Adding express.js to a Pre-existing vue.js/webpack Setup

Unpacking Reddit's JSON data in a Node environment proves challenging as the Javascript parser seems to have a distaste for

What is the best way to display text from one text field onto another text field?

Is it possible to automate the firing of setTimeout events using WebDriver?

Retrieving search results in JSON format from a website with NodeJs

Combine two objects while keeping only specific properties

The Firebase cloud function will only activate when I manually input data into the Firestore database via the console

You must provide a secret or key in order to use the JwtStrategy

Utilizing JavaScript to retrieve data from a self-submitting form

Using Firebase with Vue.js

Retrieve the attribute value from an HTML element in a JSON response using JavaScript

Troubleshooting UV Mapping Problem in THREEJS JSON Model

How can I dynamically display Material-UI's <MenuItem/> within a <DropDownMenu/> using ReactJS?

Having trouble getting the equirectangular panorama example from Three.js to work on your device even though WebGL is supported?

The function fs.createReadStream does not exist

Tips for extracting a specific attribute from an array of objects using both react and JavaScript while considering various conditions

When working with an Angular application, IE9 may display the error message: "An internal error occurred in the Microsoft Internet extensions"

Should I include all components in the app.js file or import them directly into the Vue component?