Getting extra information for every hit before render the results

Hello, I’m trying to get some extra information, like some relations and images, for every hit, before render the result, using Vue InstantSearch V2.

I made a custom component, using the connector.

At the beggining was because I need to send some event to google analytics, but now I neet to get some extra information for every hit, before it’s rendered.

This is what I have:

<template>
    <div v-if="state" class="mb-12 mt-6 ais-Hits flex items-start flex-wrap -mx-2">
        <div v-for="item in hits" :key="item.id" class="mb-6 px-2 w-full md:w-1/2 lg:w-1/3">
            ...
            {{ item.title }} // shows the original title, not 'test' 🤷‍♂️
        </div>
    </div>
</template>

<script>
    import { createWidgetMixin } from 'vue-instantsearch';
    import { connectHits } from 'instantsearch.js/es/connectors';

    export default {
        mixins: [
            createWidgetMixin({ connector: connectHits })
        ],
        computed: {
           hits() {
                this.state.hits.forEach(function(o, i){
                    axios.get('http://localhost:8089/api/v2/cars/images/' + o.id).then( response => {
                            o._images = response.data;
                            o.title = 'test';  // <-- even I try to change the title, the render shows the original !!
                        }
                    )
                    this.trackImpression(o);
                }, this);
                return this.state.hits;
            }
        },
        methods: {
            trackImpression(item) {
                // send event to analytics
            }
        },
    }
</script>

Even I try to set the images, o (for test) change the title (like I mention in the code) the render shows the original title !!
Any idea what I’m doing wrong?

Thanks

Hi there,

Could you setup an example using Codesandbox.io with the minimal implementation of your use-case so we may both work from the same set of code. This Vue InstantSearch template will be a great base to work from:

Thanks!

Hi, thanks … I made an example here:

Edit Vue Template

What I would like to achieve is to add information to each hit, before showing it.
For example, the images for each car, are now in the index, but I like to remove that info from the index (and other items for each car) and retrieve that from an api, before show the result.

Like I try to do it in the line 109 in the aisCustomHits.vue module, but doesn’t work.
Even if I try to change the title, like I did in the line 113, it does not work either.

So, the question is: how I can get some extra information (like images, or some other relationships) for each car, before showing it?

Thanks!

This is embarrassing, but actually this works !!!
I was modifying the title attribute, but using a ais-highlight component to print it, wich use another attribute.
Sorry !! Thanks …

ANY WAY, I like to know if this is the best way to do what I want … thanks!