Vuejs: watching state variable from component

Question

I have a global variable that is populated with an API call when a component is mounted. I also have a chart component that I would like to show if that variable is not null (i.e. has the request has finished and it has been populated).

At the moment to render the chart I am using this:

<template>
  <div class="container">

    <b-chart
        v-if="$store.state.lists[api_key] != null"
        :chartdata="$store.state.lists[api_key]"
        :options="options"
    />
  </div>
</template>

I have tried moving this check $store.state.lists[api_key] != null to computed or watch, to minimise the inline scripting, but I can't seem to get it to work. Would someone please show me how.

Nazaire · Accepted Answer · 2021-03-01 02:14:46Z

1

Try this:

computed: {
    canShowChart() {
        return this.$store.state.lists[this.api_key] != null;
    }
}

<b-chart
    v-if="canShowChart"
    :chartdata="$store.state.lists[api_key]"
    :options="options"
    />

answered Mar 1, 2021 at 2:14

Nazaire

2151 silver badge6 bronze badges

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

4 Comments

matt Over a year ago

I could have sworn, I tried this and it did not work. But I have just tried again and it works fine. Thanks

matt Over a year ago

if i wanted to call a function if canShowChart becomes true. How would I go about that?

Nazaire Over a year ago

@matt your probably right, i made some edits because i made a mistake when i first posted

Nazaire Over a year ago

you could watch the computed value canShowChart stackoverflow.com/questions/41067378/…

Carlos E. Carbonell · Accepted Answer · 2021-03-01 02:30:58Z

1

Since null values are interpreted as "falsy", and assuming you have an "api_key" data variable, you can use it this way:

computed: {
    chartData() {
        return this.$store.state.lists[this.api_key]
    }
}

<template>
  <div class="container">
    <b-chart
        v-if="chartData"
        :chartdata="chartData"
        :options="options"
    />
  </div>
</template>

answered Mar 1, 2021 at 2:30

Carlos E. Carbonell

664 bronze badges

Collectives™ on Stack Overflow

Vuejs: watching state variable from component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related