Question

我的表单具有一个名字和姓氏，它们最初显示为一个紧凑的字符串，但是当用户单击该字符串时，它将分为两个输入字段。当用户单击页面上的其他位置（在这两个输入字段内部以外的任何位置）时，我需要这两个输入字段消失并恢复为紧凑的字符串格式。为了实现这一点，我将v-on指令与blur属性一起使用。这很好用，但前提是用户首先单击输入字段之一以触发焦点。这是因为模糊仅在已经聚焦的输入字段上触发。当输入元素有条件地呈现时，我是否有一种方法可以自动将第一个输入字段放在焦点上？有更好的方法吗？

干杯。

这是我的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>

在我的Javascript中...

    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);
        }
        },

Answer 1

在根元素（即HTML的整个正文）上放置@click=someFunction（或计算得出），然后更改文本。

Answer 2

这可能不是最佳解决方案，但是您可以使用@click($event)来知道单击隐藏或不隐藏输入的位置。

This post about checking event targets可能是一个好的开始。

我还编写了一个最小示例，以帮助您解决问题。希望对您有帮助。

new Vue({
  el: "#app",
  data: {
    person: {
      firstname: 'PersonFirstname',
      lastname: 'PersonLastname'
    },
    showCompactString: true
  },
  methods: {
    onCompactStringClicked() {
      this.showCompactString = false
    },

    // Hide the inputs if a click is triggered outside of them
    onAppClicked(event) {
      // Do nothing if compact string is being shown
      if (this.showCompactString)
        return

      const fistnameInputClickedOn = event.target.matches('#firstname')
      const lastnameInputClickedOn = event.target.matches('#lastname')
      const anyInputClickedOn = fistnameInputClickedOn || lastnameInputClickedOn

      if (!anyInputClickedOn)
        this.showCompactString = true
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" @click="onAppClicked($event)">
  <a v-if="showCompactString" @click.stop="onCompactStringClicked">{{person.firstname}} {{person.lastname}}</a>
  <div class="row" v-else>
    <div>
      <input type="text" id="firstname" placeholder="First Name" v-model="person.firstname">
    </div>
    <div>
      <input type="text" id="lastname" placeholder="Last Name" v-model="person.lastname">
    </div>
  </div>
</div>

如果有困难，请随时发表评论。我会尽快给您答复。

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

2 个答案: