Блог

Главная - Вопросы по программированию - Как запустить событие фокусировки ввода внутри метода в Vue.js ?

Как запустить событие фокусировки ввода внутри метода в Vue.js ?

#javascript #vue.js #vuejs2 #vue-component #bootstrap-vue

#javascript #vue.js #vuejs2 #vue-компонент #bootstrap-vue

Вопрос:

У меня есть входные данные, для которых используется следующее событие :

  <b-nput
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            @focus="$event.target.select()"
          ></b-input>

Как я могу использовать это @focus="$event.target.select()" событие внутри:

Приведенный выше метод копирует значение. Мне нужно запустить вышеупомянутое событие выбора фокусировки, когда пользователь нажимает копировать, как это может быть достигнуто правильно?

Ответ №1:

Добавьте saved метод в качестве обработчика события фокусировки :

 @focus="saved"

метод :

 methods: {
  saved(event){ //the event is passed automatically as parameter
     event.target.select()
  }
}

Редактировать :

Попробуйте добавить ref к элементу ввода

  <b-input
          ref="input"
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
         
            @focus="$event.target.select()"
          ></b-input>

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

  methods: {
      async copy(s) {
      await navigator.clipboard.writeText(s) 
      this.$refs.input.focus();
     ...
    }
}

Комментарии:

1. спасибо за ответ, сохраненный метод — это еще один метод, в котором мне также нужно его запустить

2. пожалуйста, объясните подробнее сценарий

3. Существует метод, который копирует значение помимо метода фокусировки, описанного выше, мне нужно, чтобы инициировать вышеупомянутый выбор, когда пользователь нажимает копировать асинхронные копии { ожидание navigator.clipboard.writeText (ов) }

4. Пожалуйста, попробуйте отредактировать вопрос с этими деталями и подробнее объяснить желаемое поведение

5. Кажется, что это работает, но имеет только одну проблему. Я использую один и тот же метод копирования для двух входных данных, когда я использую одну и ту же ссылку, она выбирается первой, только когда я добавляю к ссылкам в том же методе, который она выбирает только для последнего.

Ответ №2:

Дайте ref вашему вводу :

 <b-input
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            ref="theInput"
          ></b-input>

затем в любом месте вашего скрипта компонента :

 this.$refs['theInput'].focus();

Ответ №3:

У вас может быть $event ссылка на saved метод

   <b-nput
        class="input"
        id="link"
        v-model="link"
        placeholder="link"
        @focus="saved"
      ></b-input>


methods: {
  saved(event){
    console.log(event)
  }
}

ссылка — https://v2.vuejs.org/v2/guide/events.html