Установка фокуса на элементы дочернего компонента после события клика Vuejs - PullRequest
Новая
       10

Установка фокуса на элементы дочернего компонента после события клика Vuejs

0 голосов
/ 26 февраля 2020

Я хочу сфокусироваться на go моей кнопке редактирования в моем дочернем компоненте после нажатия кнопки отмены в родительском компоненте. Он работает в chrome, так как это поведение по умолчанию, но firefox перемещает фокус в верхнюю часть страницы. Это мой код: 

<parent>
    <child ref="childCard"
           :cancel-function="cancelTimeReminderLimit">
    </child>
<parent

------

<child>
    <button ref="editButton"></button>
    <button @click="cancelFunction()"></button>
</child>

child. js: 

props: {
    cancelFunction: Function,
},
methods:{
    focusEdit: function(){
      this.$refs.editbutton.focus()
    }
}

parent. js: 

confirmRemoveReminder() {    
    this.$refs.editButton.focus();
    this.$nextTick(() => {
        this.$refs.editButton.focusEdit();
        this.$refs.editButton.focus();
        this.$refs.childCard.$refs.editButton.focus();
      }),

Как видите, у меня есть Для этого использовались три способа:

1 - присвоение ссылки дочернему компоненту (ref="childCard"), а затем непосредственный вызов ссылки на кнопку (ref="editButton")

2 - присвоение ссылки дочернему элементу Компонент (ref="childCard"), а затем вызывающий ref кнопки через метод (focusEdit())

3 - вызывающий ref кнопки напрямую (ref="childCard")

Ни один из этих подходов не работает. Кто-нибудь знает, почему они не работают?

...