Vue Алголия автозаполнение при выборе показывает [объект объекта] - PullRequest
Новая
       15

Vue Алголия автозаполнение при выборе показывает [объект объекта]

1 голос
/ 24 февраля 2020

TLDR

Как я могу установить значение vue-autosuggest после нажатия на предложение?

У меня есть относительно простое приложение, которое я использую ais-instasearch вместе с vue -autosuggest . Мое приложение работает должным образом, но проблема, с которой я сталкиваюсь, заключается в том, что, когда я выбираю элемент из предложений, он устанавливает в поле ввода значение [Object object], и я не могу выяснить из документов или отладить какое значение я должен вернуться, чтобы я мог очистить поле ввода. Что касается моего кода, поле ввода-вывода не отображается ни на один v-model с.

Когда я проверяю установленные значения, например, я ищу 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 }));
      }
    },

Первое изображение перед нажатием на соответствующий результат. Before clicking on the matched results

Второе изображение после нажатия на соответствующий результат. After click on the matched result

Показывает компонент со значением lol после нажатия enter image description here

1 Ответ

1 голос
/ 09 апреля 2020

В соответствии с Vue -autosuggest документов:

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

Используйте значение get-Suggestion-prop и связать метод для возврата любого атрибута Вы хотите от этого предложения. 

 <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;
},
...