按下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

在文本框上放置一个模板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>