Vue: initial triggering of a computed property

Question

In my Vue component, I have a computed property which watches the state and the component, and returns an object.

        currentOrganization () {
            if (this.$store.state.organizations && this.selectedOrganization) {
                return this.$store.state.organizations.filter(org => org.id === this.selectedOrganization)[0];
            }
        }

Unfortunately, this property does not update automatically when the component loads, though I can see that I have both this.$store.state.organizations and this.selectedOrganization. It does, however, update when I dispatch an action to my Vuex store via the select component below:

                <b-form-select id="orgSelect"
                               v-model="selectedOrganization"
                               :options="this.$store.state.organizations.map(org => {return {value: org.id, text:org.name}})"
                               size="sm"
                               v-on:input="currentOrganizationChange()"
                               class="w-75 mb-3">
                    <template slot="first">
                        <option :value="null" disabled>Change Organization</option>
                    </template>
                </b-form-select>

The component dispatches a Vuex action:

            currentOrganizationChange () {
                this.$store.dispatch('setCurrentOrganization', this.selectedOrganization);
            },

How can I make currentOrganization() compute initially?

gleam gleam · Accepted Answer · 2019-01-28T16:22:00

The computed will not calculate untill you use it.

console.log it, or just write currentOrganization; somewhere in code which executes and it will calculate :)

Vue: initial triggering of a computed property

2 Answers