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

我已经做了我的研究，试图找出如何实现我下面所描述的，但我没有运气

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

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

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

我的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”

使现代化

---

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

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

新Vue{ 模板：{{computedItem.title}}， 数据：{ 兰格：嗯， 项目：{ 标题：{ 恩：你好， 茹：Пццц } } }, 计算：{ 计算项目{ const item=JSON.parseJSON.stringifythis.item； 对于项目中的值{ 如果项的类型[value]==object&&object.keysitem[value]。includeThis.langFromCookie item[value]=item[value][this.langFromCookie]； } 退货项目； } } }$mountapp

---

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

... {{item.title[lang]} {{item.subtitle[lang]} 如果您想在组件装入时根据lang prop发出请求，那么您可以在装入的方法中发出请求，然后进行如下查询

安装{ get`/getSomethingWithLang/：${this.item.title[this.lang]}` ... }

---

变量语言从何而来？你说的是饼干，但我看不见code@onuriltan我刚刚编辑了我的原始帖子，将lang变量作为道具传递给vue组件。你能回顾一下答案吗？如果它不能解决问题，我可以提供帮助。我喜欢这种方法，但您的解决方案只是转换搜索后显示的记录结果，而不是修改搜索查询以限制结果？我理解正确吗？恐怕这只会影响结果的显示方式，例如item.title，而不会影响查询结果的方式。我想查询item.title[lang]，而不是仅显示item.title[lang]您想何时查询？换车后？查询您的意思是对某个端点的api请求？lang prop不会更改，但是我想在title.en中查询或搜索，例如，当lang为en时。不仅仅是显示title.en。我想我必须找到一种方法来引用computed属性中的项，因为数据中没有项。所以你想在组件挂载上这样做，如果lang是en，那么你想查询，如果lang是gr，那么您也希望查询，但据我所知，使用不同的lang参数，我不想发出额外的请求或修改Algolia的InstantSearch自动工作的方式。我已经包含了InstantSearch的Vue组件，它负责搜索/查询功能，我想知道是否有办法稍微修改一下，以便包含“lang”属性，而不是实现整个查询。。。不过，非常感谢您的努力。