Algolia Vue 即时搜索 – 切换类正在重置属性

Question

我有一个Algolia精简列表，但每次我在它周围切换一个类时，查询都会消失。我无法弄清楚重置值的原因是什么。

这是我当前的示例：

<template>
<div id="app" :class="{active}">
<ais-instant-search :search-client="searchClient" index-name="products">
<button @click="toggleActive">Toggle</button>
<span>&larr; Pressing this is wiping the search.</span>
<div class="dietary-requirements-dropdown--checkboxes">
<ais-refinement-list attribute="dietary" :sort-by="['name:asc']"></ais-refinement-list>
</div>
</ais-instant-search>
</div>
</template>
<script>
import algoliasearch from "algoliasearch/lite";
export default {
name: "App",
data() {
return {
active: false,
searchClient: algoliasearch(
"ZVIJ67X9P8",
"df6c2515326327131df74c0a879b8794"
)
};
},
methods: {
toggleActive() {
this.active = !this.active;
}
}
};
</script>
<style lang="scss">
.dietary-requirements-dropdown--checkboxes {
opacity: 1;
.active & {
opacity: 0.2;
}
}
</style>

演示：https://codesandbox.io/s/vue-template-z5woy

Answer 1

正如 @StevenB. 所指出的，由于反应式类名，问题在于 dom 元素的重新渲染。

具体来说，包装器组件上的此属性：

:class="{active}" 

重新呈现包括此ais-refinement-list在内的所有内容。这是一个问题，因为当列表被销毁时，反应式搜索会有效地将所有不存在的复选框视为未选中，从而重置搜索。

这是一个简单的修复，虽然不是完全反应。我替换了：

toggleActive() {
this.active = !this.active;
}

用"香草"：

toggleActive() {
document.querySelector("#app").classList.toggle("active");
}

最好在可用时使用$refs

toggleActive() {
this.$refs.filters.classList.toggle("active");
}

这意味着 DOM 不会重新呈现，复选框不会重置，并且搜索保持不变。