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

【问题标题】：Algolia Vue Instant Search – Toggling class is resetting attributesAlgolia Vue 即时搜索 – 切换类正在重置属性
【发布时间】：2020-02-12 10:56:09
【问题描述】：

我有一个 Algolia refinement list，但每次我在它周围切换一个类时，查询都会消失。我无法弄清楚是什么在重置这些值。

这是我当前的示例：

<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

【问题讨论】：

我很确定 Vue 必须重新渲染模板，因为该变量在 DOM 内部使用，强制子组件更新并且 algolia 组件无法持久化选择。您也许可以在ais-instant-search 组件上使用v-once。
@StevenB。谢谢史蒂文，我昨天一直在挣扎，今天早上在阅读您的答案之前以类似的感觉醒来。用观察者替换反应类，querySelector.classList.toggle 解决了所有问题。谢谢

标签： vue.js algolia vue-instant-search

【解决方案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 不会重新渲染，复选框不会重置，搜索保持不变。

【讨论】：