Vue项目中如何在v-if场景下调用方法设置父元素类名

你不需要单独调用resultsExist方法，直接利用ais-stats组件提供的nbHits就能实现需求，而且原代码里的resultsExist方法存在语法错误（应该用this.isResults = true而非冒号赋值）。以下是两种可行方案：

方案一：直接绑定nbHits到类名判断 #

这是最简洁的方式，不需要额外的数据或方法，直接在父级div的:class中使用nbHits：

<div :class="{ 'results': nbHits > 0 }">
    <ais-stats v-slot="{ nbHits }">
        <ais-hits
            v-if="nbHits"
            v-slot="{ items }"
        >
            <Product v-for="item in items" :key="item.objectID" :product="item" />
        </ais-hits>

        <p v-else class="text-center">
            No results.
        </p>
    </ais-stats>
</div>

解释：nbHits是ais-stats通过插槽传递的值，直接用它判断是否有搜索结果，进而控制父div的results类名是否生效。

方案二：保留isResults数据（适用于有额外逻辑依赖的场景） #

如果需要将结果状态存在组件数据中供其他逻辑使用，可以在插槽中直接更新isResults：

<div :class="{ 'results': isResults }">
    <ais-stats v-slot="{ nbHits }">
        <template v-if="(isResults = nbHits > 0)">
            <ais-hits v-slot="{ items }">
                <Product v-for="item in items" :key="item.objectID" :product="item" />
            </ais-hits>
        </template>

        <p v-else class="text-center">
            No results.
        </p>
    </ais-stats>
</div>

同时修正组件的data并移除错误的方法：

data() {
    return {
        isResults: false
    };
}

解释：在v-if判断中直接给isResults赋值，既完成了结果存在性的判断，又同步更新了组件状态，一举两得。

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