Vue.js 3在方法内带有ref的输入上使用自动聚焦-前端问题

Vue.js 3 use autofocus on input with ref inside a method(Vue.js 3在方法内带有ref的输入上使用自动聚焦)

本文介绍了Vue.js 3在方法内带有ref的输入上使用自动聚焦的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的是Vue2，但我最近尝试了Vue 3。

我有一个简单的问题：

 <input ref="myinput" />
 <button @click="submitData" />

我要在函数&submitData"；内部将"；焦点"；设置在"；myinput"；上。在Vue 2中很简单(这个.$refs...)，但在Vue 3中，他们把它变得复杂了。我看到了"；Setup"；的示例，但对我没用，因为我认为您只能从元素访问"；Value&Quot；。

有没有办法在方法内部的元素上执行&Quot；Focus&Quot；on？

推荐答案

您仍然可以使用Vue 3执行相同的操作，但如果您使用Compostion API，则会有所不同：

选项接口：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const {
  createApp
} = Vue;
const App = {

  data() {
    return {

    }
  },
  methods: {
    submitData() {
      this.$refs.myinput.focus()
    }
  },
  mounted() {

  }
}
const app = createApp(App)
app.mount('#app')

<script src="aHR0cHM6Ly91bnBrZy5jb20vdnVlQDMuMC4wLXJjLjExL2Rpc3QvdnVlLmdsb2JhbC5wcm9kLmpz"></script>

<div id="app">
  Vue 3 app
  <input ref="myinput" />
  <button @click="submitData">
  Submit
  </button>
</div>

组合接口：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const {
  createApp,
  ref,
  onMounted,

} = Vue;
const App = {

  setup() {
    const myinput = ref(null)

    function submitData() {
      myinput.value.focus()
    }

    return {
      myinput,
      submitData
    }
  }
}
const app = createApp(App)
app.mount('#app')

<script src="aHR0cHM6Ly91bnBrZy5jb20vdnVlQDMuMC4wLXJjLjExL2Rpc3QvdnVlLmdsb2JhbC5wcm9kLmpz"></script>

<div id="app">
  Vue 3 app
  <input ref="myinput" />
  <button @click="submitData">
  Submit
  </button>
</div>

这篇关于Vue.js 3在方法内带有ref的输入上使用自动聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！