Assigning a variable in Vue.js after making a call with axios

Question

Assigning a variable in Vue.js after making a call with axios

One of the challenges I'm facing is trying to call axios using this.request(url) within a mixin. The goal is to streamline and consolidate all axios-related functionality in a single file, but I'm running into some issues.

In my Vue file:

export default {
  name: "employees-list",
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    this.employees = this.request('https://jsonplaceholder.typicode.com/posts');
  }
}

Request.js:

Vue.mixin({
  methods: {
    request: function (url) {
      axios.get(url)
        .then(response => {
        return response.data
      })
        .catch(e => {
        this.errors.push(e)
      })
    }
  }
});

The issue I'm encountering is that the employees variable appears as "undefined."

I suspect that the problem lies with asynchronous processing or the concept of async/await, but I'm still grappling with understanding it fully.

javascript vue.js vuejs2 axios

Answer 1

Answer №1

If you're looking to use the mixin to create a universal method for fetching data, then make sure to return the promise from the request function and handle the retrieved data in the success callback.

Check out this example below:

console.clear()

const EmployeesList = {
  name: "employees-list",
  template: `
      <ul>
        <li v-for="employee in employees">{{employee.title}}</li>
      </ul>
    `,
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    // Just using posts as an example here instead of actual employees.
    this.request('https://jsonplaceholder.typicode.com/posts')
      .then(e => this.employees = e);
  }
}

Vue.mixin({
  methods: {
    request: function(url) {
      // Return the promise
      return axios.get(url)
        .then(response => {
          return response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    }
  }
});

new Vue({
  el: "#app",
  components: {
    EmployeesList
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <employees-list></employees-list>
</div>

Answer 2

If you're looking to use the mixin to create a universal method for fetching data, then make sure to return the promise from the request function and handle the retrieved data in the success callback.

Check out this example below:

console.clear()

const EmployeesList = {
  name: "employees-list",
  template: `
      <ul>
        <li v-for="employee in employees">{{employee.title}}</li>
      </ul>
    `,
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    // Just using posts as an example here instead of actual employees.
    this.request('https://jsonplaceholder.typicode.com/posts')
      .then(e => this.employees = e);
  }
}

Vue.mixin({
  methods: {
    request: function(url) {
      // Return the promise
      return axios.get(url)
        .then(response => {
          return response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    }
  }
});

new Vue({
  el: "#app",
  components: {
    EmployeesList
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <employees-list></employees-list>
</div>

Answer 3

Answer №2

Give this a try:

const app = new Vue({
    el: '#app',
  data: {
    users: []
  },
  methods: {
    fetchData(url){
        return new Promise((resolve, reject) => {
        axios.get(url)
          .then(response => {
            resolve(response);
          }).catch(error => {
            // error handling
          });
      });   
    }
  },
  mounted(){
   this.fetchData('https://jsonplaceholder.typicode.com/users').then(response => {
    this.users = response;
   })
  }
})

Answer 4

Give this a try:

const app = new Vue({
    el: '#app',
  data: {
    users: []
  },
  methods: {
    fetchData(url){
        return new Promise((resolve, reject) => {
        axios.get(url)
          .then(response => {
            resolve(response);
          }).catch(error => {
            // error handling
          });
      });   
    }
  },
  mounted(){
   this.fetchData('https://jsonplaceholder.typicode.com/users').then(response => {
    this.users = response;
   })
  }
})

Assigning a variable in Vue.js after making a call with axios

Answer №1

Answer №2

Similar questions

Is it possible to create an async hover provider in a VSCode extension?

Tips for obtaining an Amazon email within an Alexa SDK V2 skill

CMS that utilizes flat files and generates output in JSON format

Display the data received from the client on the NodeJS server

Can you tell me the performance metrics displayed in the Vue devtools alongside the components?

Troubleshooting Angular Reactive Forms: Issue with Binding Dynamic Select Dropdown Value

Combining items from the identical array in pairs using distinct identifiers

The issue of "Callback is not a function" arises within the selectize framework

What is the best way to extract information from a JSON object that includes a PHP array of objects?

Dynamic Data Powered jQuery Datatables

The chosen choice is not able to be shown within the option tag

Incorporating words into the core of a pie chart: Highcharts

Challenges with asynchronous problems related to importing models utilizing promises in conjunction with the three.js

A feature that updates the value of a textarea by continually adding new data instead of replacing it

Remove a child node from its parent node in real-time

Is my Laravel application experiencing caching issues preventing real-time updates?

Unable to retrieve the data response

Dynamic web page updates from server using an Ajax request

Having trouble incorporating choreographer-js, an external JavaScript library, into my Nuxt project as it is not functioning correctly

Sending an image dynamically as a prop to a child component