CODEWITHSUNDEEP
javascriptvue.jsvue-componentalgolia
oliverbj
oliverbj

Reputation: 6052

Vue.js - append variable to component

I am currently using Algolia instantsearch for Vue, which is working fine. However, I am using multiple indexes, so I would like to be able to set a custom Title to each of my indexes.

This is my files:

Home.vue:

<ais-index :appId="angoliaAppId" :apiKey="angoliaAppKey" indexName="contacts" :query="query">
     <search-results></search-results>
</ais-index>
<ais-index :appId="angoliaAppId" :apiKey="angoliaAppKey" indexName="users" :query="query">
     <search-results></search-results>
</ais-index>

import SearchResults from "../search/Results";

export default {
    data() {
        return {
            query: '',
            angoliaAppId: process.env.MIX_ALGOLIA_APP_ID,
            angoliaAppKey: process.env.MIX_ALGOLIA_SECRET,
        };
    },
    components: {
        SearchResults
    }
};

And my component file, looks like this:

../search/Results:

<template>

    <ais-results class="ais-Hits__root" v-if="searchStore.query.length > 0" :data="category">
        <template slot-scope="{ result }">
            <div>
                <ais-highlight :result="result" attribute-name="name"></ais-highlight>
            </div>
        </template>
    </ais-results>
</template>

import SearchResults from "../search/Results";
import {
     Component
} from "vue-instantsearch";

export default {
     mixins: [Component]
};

Now, as said, I would very much like to be able to set a custom title name to each of my <search-results> components, like this:

<search-results :title="My Contacts"></search-results>

Which would then for example add this in the component file:

<h1>{{ title }}</h1>

Upvotes: 0

Views: 1584

Answers (1)

r0ulito
r0ulito

Reputation: 487

Seems like you'll have to use props

https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Upvotes: 1

Related Questions