Question

我的组件结构如下：

// wrapper.vue
<tab
    :components="[
        {
             id: 1,
             name: 'header',
             props: {},
             isEnabled: true
        },
        {
             id: 2,
             name: 'banner',
             props: {},
             isEnabled: true
        },
        {
             id: 3,
             name: 'body',
             props: {},
             isEnabled: true
        },
        {
             id: 4,
             name: 'footer',
             props: {},
             isEnabled: !theme
        }
    ]"
/>

// tab.vue
<template>
    <div class="tab overflow-hidden">
        <component
            :is="component.name"
            v-for="component in enabledComponents"
            :key="component.id"
            v-bind="component.props"
        />
    </div>
</template>

<script>
export default {
    name: 'Tab',
    props: {
        components: {
            type: Array,
            required: true
        }
    },
    computed: {
        enabledComponents() {
            return this.components.filter((component) => {
                return component.isEnabled
            })
        }
    }
}
</script>

// banner.vue
<template>
    <div
        v-if="showBanner"
        :class="{
            'bg-white py-2': theme === 'white',
            'bg-cream h-auto p-0': theme !== 'cream'
        }"
    >
        <div v-if="theme === 'white'" class="flex">
           ...
        </div>
        <div v-else class="flex w-full">
           ... 
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'Banner',
    computed: {
        ...mapGetters('advertisement', ['showBanner']),
        ...mapGetters('styles', ['theme'])
    }
}
</script>

我想要实现的是，仅当动态组件的属性 isEnabled 为 true 时才添加它们。因此，我将计算属性 enabledComponents 添加到 tab.vue。但是，使用 filter 函数会导致 banner.vue 不再对 vuex 更改做出反应的问题，例如v-if="showBanner" 不起作用，因此组件永远不会显示。如果我只是使用 components 而没有直接在 v-for 或计算属性中进行过滤，它会相应地更新，但是一旦我过滤它们他们不再反应了。

有谁知道它不能与过滤器一起使用的原因吗？

动态 vue 组件在计算属性中过滤时不会反应

0 个答案: