this in the Vue Instance

Question

Fairly new to Vue and having trouble with this in the Vue instance. My vue data object is:

new Vue({
  el: "#app",
  data() {
    return {
      vm_instance_data: [],
      standings: [],
      currentTab: "",
      tabs: ["MLB", "NFL", "NBA"],
      isCompleted: false,
      gameDate: date.yesterday.substr(4, 2) + "." + date.yesterday.substr(6, 2),
      loading: false,
      errored: false
    };
  }

And then in my method object I have :

methods: {
    getSportsData: function(tab) {
      let url = "";
      this.currentTab = tab; // Set the currentTab

      //====== Get Standings From MySportsFeeds Site ======================================== //
      url = `https://api.mysportsfeeds.com/v1.2/pull/mlb/2018-regular/division_team_standings.json?teamstats=W,L,GB,Win %`;

      /* jshint ignore:start */
      async function getStandings() {
        console.log(this);
        this.standings = await mySportsFeeds.feedsData(url);
        console.log('standings is: ' + this.standings);
      }
      getStandings();
      /* jshint ignore:end */

      // ======= end Standings ================================================ //

      // ======== Let's check currentTab and make appropriate API call =============== //
      // ======== Use Axios Get to retrieve the baseball info ======================== //
      if (this.currentTab === "MLB") {
        this.loading = true;
        config.params = {
          team: "nyy,nym,bos,hou,lad,atl",
          force: true
        };

        axios
          .get(
            `https://api.mysportsfeeds.com/v1.2/pull/mlb/2018-regular/scoreboard.json?fordate=${
              date.yesterday
            }`,
            config
          )
          .then(response => {
            this.vm_instance_data = response.data.scoreboard.gameScore;
          })
          .catch(error => {
            console.log(error);
            this.errored = true;
          })
          .finally(() => (this.loading = false));
        // End ==== get.then ====== //

The mySportsFeeds.js I just wanted to refactor all these Axios calls:

module.exports = {
  /* jshint ignore:start */
  feedsData: async function(url) {
    url = encodeURI(url); // Format the URI

    return (await axios.get(url, config)).data.divisionteamstandings.division;
  }

  /* jshint ignore:end */
};

The vue instance data property this.standings is not getting the data from the axios call. Yet this.vm_instance_data is working fine. The console.log(this) in getStandings() shows the Windows object?? I am at a loss. If I console.log in mySportsFeeds.js I have the array of objects returned from API. But when I look in the Dev Tools Vue panel under Main Tab, standings is Array[0]. I could really use some guidance here. Thanks in advance.

Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — thanksd, Sep 07 '18 at 17:57
The `getStandings` function has a different scope from the parent `getSportsData` method. You can use an arrow function, where `this` is the same as the parent function. For example: `let getStandings = async () => { ... }` — thanksd, Sep 07 '18 at 18:00
Yes I know how this works. Because standings is part declared in vue instance it should take this context from new Vue(0. Which it does for this.vm_instance_data. But this for standings shows Window object. — Alan, Sep 07 '18 at 18:01

this in the Vue Instance

0 Answers0