如何在 Vue.js 中的方法内触发输入焦点事件？答案

【问题标题】：How to trigger the input focus event inside a method in Vue.js?如何在 Vue.js 中的方法内触发输入焦点事件？
【发布时间】：2020-12-06 10:15:18
【问题描述】：

我有一个使用以下事件的输入：

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

我如何在里面使用这个@focus="$event.target.select()"事件：

上述方法复制值。我需要在用户点击复制时触发上述选择焦点事件怎样才能正确实现？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案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();
     ...
    }
}

【讨论】：

感谢回答，保存的方法是另一种方法，我也需要触发它
请解释更多场景
除了上面的焦点方法外，还有一个复制值的方法我需要在用户点击复制异步副本时触发上面的选择{ await navigator.clipboard.writeText(s) }
请尝试使用这些详细信息编辑问题并解释更多所需的行为
它似乎有效，但只有一个问题。当我使用它首先选择的相同引用时，我对 2 个输入使用相同的复制方法，仅当我以仅为最后一个选择的相同方法添加到引用时。

【解决方案2】：

您可以让$event 引用saved 方法

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


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

参考-https://vuejs.org/v2/guide/events.html

【讨论】：

【解决方案3】：

给你的输入一个ref：

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

然后在你的组件脚本中的任何地方：

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

【讨论】：