Question

在我的Vue组件中，我具有一个计算属性，该属性监视状态和组件，并返回一个对象。

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

不幸的是，虽然可以看到我同时拥有this.$store.state.organizations和this.selectedOrganization，但该属性在加载组件时不会自动更新。但是，当我通过以下选择组件将操作分发到Vuex存储时，它会更新：

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

该组件调度Vuex操作：

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

如何首先使currentOrganization()进行计算？

Answer 1

在您使用计算出的内容之前，不会进行计算。

console.log它，或者只写currentOrganization;在代码中执行的某个地方，它将计算出：）

Answer 2

您应确保计算所得的值始终返回一个值。短毛猫会警告您该错误。您的情况有可能失败了-也许this.selectedOrganization是虚假的。

Vue：计算属性的初始触发

2 个答案: