Vue组件条件显示问题：如何在categories数组为空时展示组件？

问题根源 #

你遇到的问题是因为父组件传递的categories实际上是字符串类型，而非数组类型。使用{{ categories |json_encode }}会把后端的数组转成JSON字符串（比如空数组变成"[]"，非空数组变成"[{...}]"），导致子组件中基于数组length的判断完全失效：

• v-if="categories"：字符串即使是空数组的JSON表示"[]"也会被视为真值，所以组件一直显示。
• v-if="categories.length > 0"：字符串的length是字符长度，比如"[]"的长度是2，非空数组的JSON字符串长度更长，但你说即使有数据也隐藏，大概率是后端传递的categories实际为空，或者字符串解析逻辑不符合预期。

修复步骤 #

1. 修正父组件的传值方式

如果你用的是后端模板（比如Laravel Blade），应该使用框架提供的JSON输出指令，确保传递给Vue的是真正的JavaScript数组：

<map
    :products="@json($markers)"
    :categories="@json($categories)"
/>

如果是纯Vue环境（父组件的categories是Vue响应式数据），直接绑定变量即可，不需要手动JSON编码：

<map
    :products="markers"
    :categories="categories"
/>

2. 子组件中使用正确的判断条件

当categories是真正的数组后，直接用v-if="categories.length > 0"就能实现：空数组时隐藏组件，有数据时显示。
比如在Map组件的模板中：

<template>
    <div>
        <Filter v-if="categories.length > 0" />
        <!-- 其他组件内容 -->
    </div>
</template>

备选方案（如果无法修改父组件传值）

如果必须处理字符串类型的categories，可以在子组件中通过计算属性将其转为数组：

<script>
import Filter from './Filter.vue';

export default {
    components: {
        Filter
    },
    props: {
        categories: {
            type: [Array, String],
            required: true
        },
    },
    computed: {
        parsedCategories() {
            if (typeof this.categories === 'string') {
                try {
                    return JSON.parse(this.categories);
                } catch (e) {
                    return [];
                }
            }
            return this.categories;
        }
    }
};
</script>

然后模板中使用转换后的数组判断：

<Filter v-if="parsedCategories.length > 0" />

内容的提问来源于stack exchange，提问作者Tyssen