vue.js - 如何在嵌套对象中搜索

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>