Как сделать focus для input text при клике на кнопку?

Для реализации фокуса на поле ввода при клике на кнопку в Vue.js, вам потребуется использовать директиву v-on для обработки события click на кнопке и методы focus() и $refs для установки фокуса на поле ввода.

Ниже приведен пример кода, который демонстрирует, как реализовать эту функциональность:

HTML:

<div id="app">
  <button v-on:click="focusInput">Фокус</button>
  <input type="text" ref="inputField" />
</div>

Vue.js:

new Vue({
  el: "#app",
  methods: {
    focusInput() {
      this.$refs.inputField.focus();
    },
  },
});

В этом примере мы создаем новый экземпляр Vue и связываем его с элементом с идентификатором "app". У нас есть метод focusInput, который вызывается при клике на кнопку. В этом методе мы используем $refs для доступа к элементу ввода с помощью его атрибута ref (ref="inputField"). Затем мы вызываем метод focus() для установки фокуса на поле ввода.

Когда вы кликаете на кнопку "Фокус", поле ввода будет получать фокус, и вы сможете сразу начать вводить данные.

Мы используем Vue.js для упрощения манипуляций с DOM-элементами и обработки событий. Эти инструменты помогают нам создавать плавные и эффективные пользовательские интерфейсы.