Vuejs axios variable assignation after call

Question

I would like to call axios with this.request(url) from a mixin (to simplify and centralize everything about axios in the same file) but it's not working.

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 employees is "undefined".

I think the problem is async or await but i don't understand.

Bert · Accepted Answer · 2018-01-19 18:04:50Z

6

It looks like you want the mixin to create a generic method for retrieving data. That being the case you need to return the promise from the request method and handle the resulting data in the success callback.

Here is a working example.

console.clear()

const EmployeesList = {
  name: "employees-list",
  template: `
      <ul>
        <li v-for="employee in employees">{{employee.title}}</li>
      </ul>
    `,
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    // obviously using posts here as an example instead of 
    // employees.
    this.request('https://jsonplaceholder.typicode.com/posts')
      // handle the promise success
      .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>

answered Jan 19, 2018 at 18:04

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

connexo Over a year ago

Great understanding of OPs needs and intentions, good explanation and beautiful code. <3

Eyk Rehbein · Accepted Answer · 2018-01-19 18:13:13Z

1

Try this:

new Vue({
    el: '#root',
  data: {
    employees: []
  },
  methods: {
    request(url){
        return new Promise((resolve, _) => {
        axios.get(url)
          .then(res => {
            resolve(res);
          }).catch(err => {
            // err management
          });
      });   
    }
  },
  mounted(){
   this.request('https://jsonplaceholder.typicode.com/posts').then(res => {
    this.employees = res;
   })
  }
})

edited Jan 19, 2018 at 18:13

answered Jan 19, 2018 at 17:42

Eyk Rehbein

3,8684 gold badges20 silver badges39 bronze badges

4 Comments

alxb Over a year ago

employees has "Promise" value but when i do this : <li v-for="employee in employees">{{employee.title}}</li> it's not working

Eyk Rehbein Over a year ago

I changed my post. It should work better for you now @alxb

alxb Over a year ago

I think it will work but it's too much code. I want to have everything about axios only in one external file to do a simple call this.request() where i want in my vue file. I don't want to have for each vue file axios.get.... on methods. Do you see what i want to do? The final goal is i want to do only this.request(url) in one line and let request function do error management, etc...

Eyk Rehbein Over a year ago

Sorry was a bit blind before. :D now it should work perfectly

Collectives™ on Stack Overflow

Vuejs axios variable assignation after call

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related