Vue -InstantSearch (Algolia): Как добавить ref = в поле ввода? - PullRequest
Новая
       79

Vue -InstantSearch (Algolia): Как добавить ref = в поле ввода?

1 голос
/ 02 августа 2020

Я хотел бы добавить ref='foo' к элементу <ais-search-box> (к визуализированному полю ввода), чтобы затем при необходимости динамически добавить .focus. Но как мне добавить ref=[..]? Мой текущий код: 

<ais-search-box ref="foo">
    <div slot="submit-icon"><i class="fas fa-search text-xl p-2 text-blue-400"></i></div>
</ais-search-box>

Но это не работает, окончательный обработанный элемент не содержит ref= информации: 

<form action="" role="search" novalidate="novalidate" class="ais-SearchBox-form">
   <input type="search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" required="required" maxlength="512" aria-label="Search" autofocus="autofocus" class="ais-SearchBox-input"> <button type="submit" title="Search" class="ais-SearchBox-submit">
    <div><i class="fas fa-search text-xl p-2 text-blue-400"></i></div></button> 
    <button type="reset" title="Clear" class="ais-SearchBox-reset" hidden="hidden">
    <svg role="img" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" class="ais-SearchBox-resetIcon"><path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fillRule="evenodd"></path></svg>
   </button> <!---->
</form>

1 Ответ

0 голосов
/ 02 августа 2020

В родительском компоненте оставьте ref на дочернем компоненте, как у вас.

Родитель. vue

<ais-search-box ref="foo">
.....
</ais-search-box>

Детский. vue

<form action="" ......>
   <input type="search" class="ais-SearchBox-input".. ref="childInput"> // add ref to the input field in the child component that you want to access
   .......
</form>

Доступ к вводу в дочернем компоненте из дочернего компонента и установка на нем фокуса: 

this.$refs.childInput.focus();

Доступ ко входу дочернего компонента из родительского компонента и установка на нем фокуса: 

this.$refs.foo.$refs.childInput.focus();
...