CODEWITHSUNDEEP
vue.jsvuejs2
Sean
Sean

Reputation: 2577

Async changes to properties

New to vuejs.

I have a vue with the following script (code shortened):

export default {
  mixins: [asyncStatuses],
  props: {
    value: { type: Object }
  },
  data() {
    return {
      statuses: []
    };
  },
  computed: {
      hasStatuses() {
          return this.statuses && this.statuses.length > 0;
      }
  },
  beforeMount() {
    // This is an async call
    this.getStatuses().then((response) => {
      this.statuses = response.data.statuses;
    });
  }
};

In my .vue file, I do something like this:

<div v-if="hasStatuses">
    <div>Show a list of statuses</div>
</div>

The problem is the <div> never shows up. The statuses are loading correctly. I put a debugger in the computed.hasStatuses but it never runs?

Can anyone explain to me how and why this is happening and how to fix it?

Thanks again!!

Upvotes: 0

Views: 35

Answers (1)

Bert
Bert

Reputation: 82479

The code is setting self.statuses, but self is not defined.

self.statuses = response.data.statuses

Just use this.

this.statuses = response.data.statuses

Upvotes: 2

Related Questions