Vue algolia 自动提示选择显示 [Object object]

Question

TLDR

点击建议后如何设置vue-autosuggest的值？

我有一个相对简单的应用程序，我正在使用ais-instasearch 和vue-autosuggest。我的应用程序按预期工作，但我遇到的问题是，当我从建议中选择一个项目时，它将我的输入字段设置为[Object object]，我无法从文档中弄清楚，也无法从调试我的值应该返回，以便我可以清除输入字段。就我的代码而言，输入框没有映射到任何v-models。

当我检查值集时，例如我搜索lol，我看到ais-autoComplete 组件在其状态下具有值lol。

我的组件是

<ais-instant-search :search-client="searchClient" index-name="blogs">
    <ais-configure
        :hitsPerPage="showing"
        :restrictSearchableAttributes="searchCategories"
    />
    <ais-autocomplete :classNames="{'ais-Autocomplete': 'tools-searchbar'}">
        <template slot-scope="{ currentRefinement, indices, refine }">
            <vue-autosuggest
                :suggestions="indicesToSuggestions(indices)"
                @selected="onSelect"
                :input-props="{
                          id: 'tools-searchbar',
                          onInputChange: refine,
                          placeholder: 'Search for blogs...',
                        }"
            >
                <template slot-scope="{ suggestion }">
                    <a id="tools-link" target="_blank">
                        <v-flex>
                            <v-avatar class="pr-2" size="36">
                                <img
                                    :src="suggestion.item.image || '/blogs.png'"
                                    alt="/blogs.png"
                                />
                            </v-avatar>
                            <span id="tool-name">
                                <ais-highlight
                                    :hit="suggestion.item"
                                    attribute="resolved_title"
                                    v-if="suggestion.item.resolved_title"
                                />
                            </span>
                            <div id="tool-description">
                                <ais-highlight
                                    :hit="suggestion.item"
                                    attribute="excerpt"
                                    v-if="suggestion.item.excerpt"
                                />
                            </div>
                        </v-flex>
                    </a>
                </template>
            </vue-autosuggest>
        </template>
    </ais-autocomplete>
</ais-instant-search>

我的方法是：

methods: {
    onSelect(selected) {
      if (selected) {
        this.query = "";
        window.open(selected.item.resolved_url);
      }
    },
    indicesToSuggestions(indices) {
      if (this.loggedin) {
        return indices.map(({ hits }) => ({ data: hits }));
      }
    },

第一张图片是在点击匹配结果之前。

第二张图片是点击匹配结果后。

这是显示点击后值为lol的组件

Answer 1

根据 Vue-autosuggest 文档：

https://github.com/darrenjennings/vue-autosuggest#getsuggestionvalue

使用道具 get-suggestion-value 并绑定一个方法以从该建议中返回您想要的任何属性。

 <vue-autosuggest
    v-model="query"
    :suggestions="filteredOptions"
    @focus="focusMe"
    @click="clickHandler"
    @input="onInputChange"
    @selected="onSelected"
    :get-suggestion-value="getSuggestionValue"
    :input-props="{id:'autosuggest__input', placeholder:'Do you feel lucky, punk?'}">
    <div slot-scope="{suggestion}" style="display: flex; align-items: center;">
      <img :style="{ display: 'flex', width: '25px', height: '25px', borderRadius: '15px', marginRight: '10px'}" :src="suggestion.item.avatar" />
      <div style="{ display: 'flex', color: 'navyblue'}">{{suggestion.item.name}}</div>
    </div>
  </vue-autosuggest>

和，

getSuggestionValue(suggestion) {
  return suggestion.item.name;
},