Vue.js 使用v-if有条件加载字段时，如何在Vuejs中设置对输入字段的关注

我的表单有一个名字和姓氏，最初显示为一个紧凑的字符串，但当用户单击该字符串时，会分成两个输入字段。我需要这两个输入字段消失，并在用户单击页面上的其他位置（这两个输入字段内以外的任何位置）时恢复为压缩字符串格式。为了实现这一点，我使用了带有模糊属性的v-on指令。这很好，但只有当用户首先单击其中一个输入字段以触发焦点时，才会这样做。这是因为模糊只会在已经聚焦的输入字段上触发。当输入元素有条件地呈现时，有没有一种方法可以让我自动将第一个输入字段置于焦点？有更好的方法吗

干杯

这是我的HTML：

<a v-if="!eitherNameSelected" @click="firstNameSelected"> 
    {{person.firstname}} {{person.lastname}}</a>                            
    <div class="row" v-else-if="eitherNameSelected" v-enter="focusOnFirstChild($event)">
        <div class="col-md-3">
        <input
                                    @focus="firstnameselected=true"
                                    @blur="firstnameselected=false"
                                    type="text"
                                    class="form-control"
                                    name="example-text-input-invalid is-invalid"
                                    id="firstname"
                                    placeholder="First Name"
                                    v-model="person.firstname"
                                    >

                           <div class="invalid-feedback">
                                    Invalid feedback
                                </div>
                            </div>
                            <div class="col-md-3">
                                <input
                                @focus="lastnameselected=true"
                                @blur="lastnameselected=false"
                                type="text"
                                class="form-control"
                                name="example-text-input-invalid is-invalid"
                                placeholder="Last Name"
                                v-model="person.lastname"
                                >
                                <div class="invalid-feedback">
                                    Invalid feedback
                                </div>

---

在根元素（即整个HTML）上放置一个

@click=someFunction

（或computed），然后更改文本。

这可能不是最好的解决方案，但您可以使用

@click（$event）

来知道您在哪里单击以隐藏输入

我想这是个好的开始

我还编写了一个简单的示例来帮助您解决问题。我希望它能帮助你

newvue({
el:“应用程序”，
数据：{
人:{
名字：“PersonFirstname”，
姓氏：“PersonLastname”
},
showCompactString:true
},
方法：{
onCompactStringClicked（）{
this.showCompactString=false
},
//如果在输入外部触发单击，则隐藏输入
OnApp（事件）{
//如果显示压缩字符串，则不执行任何操作
if（this.showCompactString）
返回
const fistnameInputClickedOn=event.target.matches（“#firstname”）
const lastname inputclickedon=event.target.matches（“#lastname”）
const anyInputClickedOn=fistnameInputClickedOn | | lastnameInputClickedOn
如果（！anyInputClickedOn）
this.showCompactString=true
}
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}

{{person.firstname}{{person.lastname}}

您能添加一些代码吗？谢谢。在根元素中使用@click=function时，如何排除两个输入字段内的单击以触发该函数？仅当用户在这些字段之外单击时才会触发该函数。

    data() {
            return {
                listid: 0,
                listname: "",
                personid: 0,
                person: {},
                nameselected: false,
                activetab1: "main",
                activetab2: "notes",
                firstnameselected: false,
                lastnameselected: false,

....


methods: {
     firstNameSelected() {
            var elem = vm.$el.getElementById('firstname');
            elem.focus();
            this.firstnameselected="true";
        }  
    },
    computed: {
        eitherNameSelected() {
            return (this.firstnameselected || this.lastnameselected);
        }
        },