Question

HTML

<span :style="{ display : displayTitle }" @dblclick="showInput()">
  {{ node.title }}
</span>
<input :style="{ display : displayTitleInput }" type="text" 
       @blur="hideInput1" @keydown="hideInput2" 
       @input="changeTitle(node.id , $event.target.value)" 
       :value="node.title">

JS

data() {
  return {
      displayTitle: "inline-block",
      displayTitleInput: "none"
    };
},
showInput() {
    this.displayTitle = "none"
    this.displayTitleInput = "inline-block"
},
hideInput1() {
   this.displayTitle = "inline-block"
   this.displayTitleInput = "none"
},
hideInput2(event) {
    if (event.keyCode === 13) {
        this.hideInput1()
    }
},

我是日本的初学者Web开发人员。对不起，我的英语不好。

HTML位于“ v-for”（v-for="node in list"）中。

当双击文本时，它变成<input>。

我希望在出现输入时使其专注于输入。

我尝试过，但是没有用。

HTML

<span :style="{ display : displayTitle }" @dblclick="showInput(node.id)">
  {{ node.title }}
</span>
<input :ref='"input_" + node.id' :style="{display:displayTitleInput}" type="text" 
       @blur="hideInput1" @keydown="hideInput2" 
       @input="changeTitle(node.id , $event.target.value)" 
       :value="node.title">

JS

showInput(id) {
    this.displayTitle = "none"
    this.displayTitleInput = "inline-block"

    this.$nextTick(this.$refs["input_" + id][0].focus())
},

控制台上没有错误，但是没有用。

Answer 1

您的主要问题是$nextTick具有回调函数，但是您正在执行

this.$refs["input_" + id][0].focus()

立即。您可以使您的代码正常工作

this.$nextTick(() => {
  this.$refs["input_" + id][0].focus()
})

但是，我认为您会遇到进一步的问题，并且可以使您的代码更简单。

您会发现的一个问题是，由于样式规则的原因，双击其中的任何一个节点输入都会变得可见。

您可以将“编辑” 标志存储在node上或单独的对象中。

下面是一个通过...简化代码的示例。

在v-for循环中使用ref的类似数组的性质，并且
在enter事件绑定上使用@keydown修饰符

new Vue({
  el: '#app',
  data: {
    list: [
      {id: 1, title: 'Node #1'},
      {id: 2, title: 'Node #2'}
    ],
    editing: {}
  },
  methods: {
    showInput(id, index) {
      this.$set(this.editing, id, true)
      
      this.$nextTick(() => {
        this.$refs.input[index].focus()
      })
    },
    hideInput(id) {
      this.editing[id] = false
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<ul id="app">
  <li v-for="(node, index) in list">
    <span v-show="!editing[node.id]" @dblclick="showInput(node.id, index)">
      {{ node.title }}
    </span>
    <input v-show="editing[node.id]" type="text"
           ref="input" :value="node.title"
           @blur="hideInput(node.id)" @keydown.enter="hideInput(node.id)">
  </li>
</ul>

Answer 2

您使用this.$nextTick();的方式不正确。您应该将其传递给回调函数。

this.$nextTick(function () {
    this.$refs["input_" + id].focus()
})

https://jsfiddle.net/un65e9oc/7/

但是，我不确定该数组访问如何为您工作，因为我注意到，$refs是一个对象，其键引用了引用名称。

[编辑：感谢@Phil的评论，上面很清楚。]

以上是针对您的问题的正确解决方案。既然您已经有了答案，那么我将添加其他内容。

之所以会出现此行为，是因为在$refs方法中更改文本框的可见性时，您在showInput()中持有的引用没有得到更新。因此，当您调用this.$refs["input_" + id].focus();时，它实际上是试图在隐藏元素上设置focus（因为当前引用未更新）。

这就是为什么您需要调用$nextTick()进行更新的原因。但是，如果您想快速解决问题而无需调用$nextTick()，则可以像这样手动更新它：

this.displayTitleInput = "inline-block"
this.$refs["input_" + id].style.display = this.displayTitleInput

this.$refs["input_" + id].focus();

这也可以工作:)希望能有所帮助！

Answer 3

autofocus属性是您的朋友：

<input type="text" autofocus />

Answer 4

当我们验证表单并希望动态关注每个字段时，这对我来说就是工作

           this.$validator.validateAll("FORM_NAME").then(valid => {

                var errors = this.$validator.errors;

                if (valid) {
                    console.log('All Fields are valid')
                } else {
                    const errorFieldName = this.$validator.errors.items[0].field;
                    console.log(errorFieldName);
                    this.$refs[errorFieldName].focus();
                }

            });

Answer 5

如果您要在单击某物后设置焦点并使用vue js显示设置了焦点的输入文本框

item1

并使用自定义指令。如果您需要它，则应在单击时起作用，然后单击设置

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

并使用它

directives: {
  click: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

vue.js专注于输入

5 个答案: