Vue - Access Mixin Data from Mixin Method

Question

I have following piece of code and cannot seem to access the mixin data/variable loading from mixin method. What am I doing wrong here?

Vue.mixin({
    data: function () {
        return {
            loading: false,
        };
    },
    methods: {
        getEntityList: async (entityName) => {
            loading = true 
            return await axios
                .get("/api/" + entityName)
                .then((response) => {
                    loading = false;
                    return response.data;
                });
        },
    },
});

In Vue component, I am calling this function like:

export default {
  name: "somename",
  data() {
    return {
      accounts: [],
    };
  },

  mounted() {
    this.getEntityList('account').then(e => this.accounts = e);
  },
};

lucasmenchon · Accepted Answer · 2022-09-10 04:31:20Z

1

in condition you are using the options API, you need to reference your loading oh yes, vue has a behavior where you need to use "this.function" to declare your functions etc.. with a this.

this.loading = true and this.loading = false

edited Sep 10, 2022 at 4:31

lucasmenchon

239 bronze badges

answered Sep 10, 2022 at 3:56

Deniz

1,48819 silver badges34 bronze badges

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

1 Comment

Haris ur Rehman Over a year ago

I already tried this, but its not working.

Estus Flask · Accepted Answer · 2022-09-10 08:50:48Z

0

loading should be this.loading, as another answer shows. Otherwise it accesses global variable that doesn't exist and isn't specific to a component, also not reactive.

getEntityList is arrow function. The choice between regular and arrow function should always be justified. Here an arrow will prevent from using correct this context.

then doesn't need to be used together with async..await, the latter is supposed to replace it.

It should be:

    async getEntityList(entityName) {
        this.loading = true 
        let response = await axios
            .get("/api/" + entityName);
        this.loading = false;
        return response.data;
    },

answered Sep 10, 2022 at 8:50

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Comments

kavigun · Accepted Answer · 2022-09-15 03:01:39Z

0

A tip, to help! In the browser console, you can put the name of the Vue instance, in your case it is > Vue.mixin. One more thing you didn't instantiate anything like below. For example:

var app = new Vue({
            el: "#app",
            data: {

ok or try something like this.

data: {
  loading: false,
  methods:{
  loadingFunction: function () {
    this.loading = false;
    // or return this.loading
  }
 }
}

edited Sep 15, 2022 at 3:01

kavigun

2,3832 gold badges18 silver badges38 bronze badges

answered Sep 10, 2022 at 3:57

lucasmenchon

239 bronze badges

3 Comments

Haris ur Rehman Over a year ago

Its instantiated, everything works, I can access this loading variable inside a vue component, but not inside the mixin.

lucasmenchon Over a year ago

@HarisurRehman I put a code above editing my comment, try to do something like I put.

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Vue - Access Mixin Data from Mixin Method

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related