Ответ:
Вы можете создать свойство данных, которое будет отслеживать текущий / последний сфокусированный элемент input. В приведенном ниже примере это называется current_focus .
. Для этого вы могли бы использовать событие focus, но, поскольку focus не всплывет, вы бынеобходимо применить его к каждому отдельному элементу input вручную.
Проще предоставить обработчик события focusin для родителя. Это событие, в отличие от focus, создает пузыри DOM от любого потомка до его родителя. Это позволяет вам использовать шаблон делегирования события.
Делегирование событий означает, что вы применяете один обработчик к родительскому элементу для события, а затем делаете что-то в зависимости от источника события. Это означает, что когда мы получаем событие focusin, мы можем просто проверить, является ли сфокусированный элемент элементом input, а затем обновить наше свойство данных ( current_focus )
КодПример песочницы:
https://codesandbox.io/s/focus-handler-vzip0
Пример кода:
FocusDemo.js
<template>
<div v-on:focusin="updateFocus">
<input name="one">
<br>
<input name="two">
<br>
<input name="three">
<br>
<button @click="handleClick">Add Text To Focused</button>
</div>
</template>
<script>
export default {
name: "FocusDemo",
data: function() {
return {
current_focus: undefined
};
},
methods: {
updateFocus: function(e) {
let element = e.target;
if (element.matches("input")) {
this.current_focus = element;
}
},
handleClick: function(e) {
if (this.current_focus) {
this.current_focus.value = "Button was clicked!";
}
}
}
};
</script>