我目前正在对Vue使用Algolia Instantsearch,它工作正常。但是,我使用了多个索引,所以我希望能够为每个索引设置自定义标题。
这是我的文件:
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
}
};
我的组件文件如下:
../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]
};
现在,如上所述,我非常希望能够为我的每个<search-results>
组件设置自定义标题名称,如下所示:
<search-results :title="My Contacts"></search-results>
例如,然后将其添加到组件文件中:
<h1>{{ title }}</h1>
答案 0 :(得分:1)