如何在嵌套对象中搜索

Question

我已经完成了我的研究，试图弄清楚如何实现我在下面描述的内容，但是我没有运气。

在我的 Algolia 索引中，一些记录具有嵌套对象。 例如，title 和 subtitle 属性的格式如下：

title:
{ 
   "en": "English title", 
   "gr": "Greek title" 
} 

我只想对这些属性的特定子集（在我们的示例中为“en”或“gr”）执行查询，而不在 UI 中“公开”任何方面——理想情况下，语言选择将基于“自动”完成在使用 props 传递给 Vue 组件的变量 (lang) 上。我正在使用具有默认 Vue 实现的 Laravel Scout 包，如文档 here 中所述。

我的 InstantSearch 实现非常简单，我没有定义任何关于查询和可搜索属性的具体内容，我目前正在使用 Algolia 的所有默认功能。

<template>
    <ais-instant-search
            :search-client="searchClient"
            index-name="posts_index"
    >
        <div class="search-box">
            <ais-search-box placeholder="Search posts..."></ais-search-box>
        </div>
        <ais-hits>
            <template
                slot="item"
                slot-scope="{ item }"
            >
                <div class="list-image">
                    <img :src="'/images/' + item.image" />
                </div>
                <div class="list-text">
                    <h2">
                         {{ item.title }}
                    </h2>
                    <h3>
                        {{ item.subtitle }}
                    </h3>
                </div>

            </template>
        </ais-hits>
    </ais-instant-search>
</template>

<script>
    import algoliasearch from 'algoliasearch/lite';

    export default {
        data() {
            return {
                searchClient: algoliasearch(
                    process.env.ALGOLIA_APP_ID,
                    process.env.ALGOLIA_SEARCH
                ),
                route: route,
            };
        },
        props: ['lang'],
        computed: {
            computedItem() {
                // computed_item = this.item;
            }
        }
    };
</script>

当变量lang 设置为“en”时，我想以某种方式传递一个选项来查询“title.en”和“subtitle.en”。所有这一切，用户无需在 UI 中选择“title.en”或“subtitle.en”。

更新

也许计算属性 是要走的路，但是我找不到如何在计算属性中引用搜索结果/点击属性（例如item.title）。这是我注释掉的代码。

Answer 1

我认为，您可以使用计算属性。只需根据当前语言变量转换当前项即可。

new Vue({
  template: "<div>{{ computedItem.title }}</div>",
  data: {
    langFromCookie: "en",
    item: {
      title: {
        en: "Hello",
        ru: "Привет"
      }
    }
  },
  computed: {
    computedItem() {
      const item = JSON.parse(JSON.stringify(this.item));

      for (value in item) {
        if (typeof item[value] === "object" && Object.keys(item[value]).includes(this.langFromCookie))
          item[value] = item[value][this.langFromCookie];
      }

      return item;
    }
  }
}).$mount("#app")

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

如果 lang 变量可以通过 props 获得，您可以在 list-text class 中检查它并通过传递动态 lang 相应地返回 {{title.en}} 或 {{title.gr}}值 title[lang] 如下所示

...

<div class="list-text">
   <h2>
      {{ item.title[lang] }}
   </h2>
   <h3>
      {{ item.subtitle[lang] }}
   </h3>
</div>

如果你想在组件挂载时根据 lang prop 发出请求，那么你可以在mounted()方法中发出请求，然后像下面这样查询

mounted() {
  axios.get(`/getSomethingWithLang/:${this.item.title[this.lang]}`)
  ... 
}