Question

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

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

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

我只想对这些属性的特定子集（在我们的示例中为“ en”或“ gr”）执行查询，而无需“暴露” UI中的任何方面-理想情况下，基于“自动”进行语言选择带有道具的变量（lang）传递给Vue组件。我正在使用 Laravel Scout 软件包和默认的 Vue 实现，如文档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

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

<?php
function resize_image($file, $max_resolution){

    if(file_exists($file)){
        $original_image = imagecreatefromjpeg($file);

        //resolution
        $original_width = imagesx($original_image);
        $original_height = imagesy($original_image);

        //try width first
        $ratio = $max_resolution / $original_width;
        $new_width = $max_resolution;
        $new_height = $original_height * $ratio;

        if($new_height > $max_resolution) {
            $ratio = $max_resolution / $original_height;
            $new_height = $max_resolution;
            $new_width = $orignial_width * ratio;
        }
            if($original_image){
 $new_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($new_image,$original_image,0,0,0,0,$new_width,$new_height,$original_width,$original_height); 
        imagejpeg($new_image, $file, 90);


        }

    }

}
    if(isset($_FILES['image']) && $_FILES['image']['type'] == 'image/jpeg'){

        move_uploaded_file($_FILES['image']['tmp_name'],$_FILES['image']['name']);
        $file = $_FILES['image']['name'];
        resize_image($file, "500"); 

        echo "<img src='$file'/>";
    }
?>

<form method="post" enctype='multipart/form-data'>
<input type="file" name="image"><br/>
<input type="submit" value="post">
</form>

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")

Answer 2

如果lang变量可通过props使用，则可以检查列表文本类中的内容，并通过传递动态lang来相应地返回{{title.en}}或{{title.gr}}值 title [lang] 如下

...

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

如果要在安装组件时根据lang prop发出请求，则可以在mount（）方法中发出请求，然后如下查询

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

如何在嵌套对象中搜索

更新

2 个答案: