CODEWITHSUNDEEP
javascriptvue.js
matt
matt

Reputation: 2039

Vuejs: watching state variable from component

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.

Upvotes: 0

Views: 719

Answers (2)

Carlos E. Carbonell
Carlos E. Carbonell

Reputation: 66

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>

Upvotes: 1

Nazaire
Nazaire

Reputation: 215

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"
    />

Upvotes: 1

Related Questions