Vue 3从文本切换到输入，使键入在一个单一的循环

Question

我正在尝试使用从text->输入。

这个过程是在它切换到输入html标签的文本上进行的。很好，但是我需要重新点击输入文本。

我如何在第一次点击后继续输入文本?

<template>
<el-input
v-if="edit"
v-focus=""
type="text"
:value="local"
placeholder="place"
@blur.native="
local = $event.target.value;
edit = false;
$emit('input', local);
"
@keyup.enter.native="
local = $event.target.value;
edit = false;
$emit('input', local);"
/>
<p v-else="" @click="edit = true" >  {{ local }}</p>
</template>
<script>
export default {
props: ["value"],
data() {
return {
edit: false,
local: this.value,
};
},
watch: {
value: function () {
this.local = this.value;
},
},
directives: {
focus: {
inserted(el) {
el.focus();
},
},
},
};
</script>

Answer 1

您需要访问DOM元素来触发对它的关注。为此，将ref属性添加到您的输入:ref="inputField"在你的脚本中:this.$refs.inputField.$el.focus();

<template>
<el-input
v-if="edit"
ref="inputField"
type="text"
:value="local"
placeholder="place"
@blur.native="
local = $event.target.value;
edit = false;
$emit('input', local);
"
@keyup.enter.native="
local = $event.target.value;
edit = false;
$emit('input', local);"
/>
<p v-else="" @click="startEdit" >  {{ local }}</p>
</template>
<script>
export default {
props: ["value"],
data() {
return {
edit: false,
local: this.value,
};
},
watch: {
value: function () {
this.local = this.value;
},
},
methods: {
startEdit() {
this.edit = true;
this.$refs.inputField.focus();
},
},
};
</script>

https://v3.vuejs.org/guide/component-template-refs.html