按下 Enter 按钮后将光标保持在文本框上

Question

我想在 VUEJS 方面得到一点帮助。 我有一个表格，我有一个文本框。单击输入按钮时，它会给我一些结果并清除文本框，但闪烁的光标不会回到文本框。 关于如何实现它的任何想法 ->

1. I write some text in the text box
2. Presses Enter 
3. Provides some info and clears the text box
4. Same text box starts to blink and i need to be able to write something back again

这是我的代码：

<template>
  <div class="app-container app-card">
    <div class="app-content">
          <b-form-input-with-validation
            v-model="number"
            :rules="{max: 255, required: true}"
            label="number"
            name="number"
            type="text"
            @keyup.enter="onSubmitClick"
            ref="track"
          />
    </div>
  </div>
</template>
<script>
  export default {

    methods: {
     
      reset() {
        this.innerValue.tracking_number = null
      },

      async onSubmitClick() {
        this.$refs.track.focus()
      },
    },
    data() {
      return {
        track: null,
      }
    },
  }
</script>

我收到此错误：

this.$refs.track.focus is not a function

Answer 1

在文本框上放置一个template ref，以便您可以通过 clear 方法对其进行聚焦。

选项 API（使用 <b-form-input>）

<b-form-input v-model="number" ref="refText"></b-form-input>

methods: {
 clear() {
    this.$refs.refText.focus();
  }
}

组合 API（使用常规 <input>）

<input ref="refText" />

setup() {
  const refText = ref(null);
}

const clear = function() {
   refText.value.focus();
}

这是一个演示：

const { createApp, ref } = Vue;
const app = createApp({
  setup() {
    const mytext = ref('press button to clear me');
    const refText = ref(null);
    
    const clear = function() {
      mytext.value = '';
      refText.value.focus();
    }

    return {
      mytext,
      refText,
      clear
    }
  }
});
app.mount("#app");

<div id="app">
  <input v-model="mytext" ref="refText" />
  <button @click="clear">Clear</button>
</div>

<script src="https://unpkg.com/vue@next"></script>