vue.js专注于输入 [英] vue.js put focus on input

问题描述

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开发人员.对不起，我的英语不好.

I am a beginner Japanese web developer. I am not good at English, sorry.

HTML位于"v-for"(v-for="node in list")中.

HTML is in "v-for" (v-for="node in list").

当双击文本时，它变为<input>.

When double click text, it turns to <input>.

我希望能够在输入出现时专注于输入.

I want to make it possible to focus on input when it appears.

我尝试过，但是没有用.

I tried this but it didn't work.

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

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

There was no error on console, but didn't work.

推荐答案

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

Your primary problem is that $nextTick takes a callback function but you are executing

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

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

immediately. You could get your code working correctly with

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

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

However, I think you'll run in to further problems and your code can be made much simpler.

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

One problem you'll find is that all your node inputs will become visible when double-clicking on any of them due to your style rules.

您可以改为将编辑" 标志存储在node上或单独的对象中的某个位置.

You could instead store an "editing" flag somewhere either on the node or in a separate object.

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

Below is an example that simplifies your code by...

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

1. Using the array-like nature of ref when used within a v-for loop, and
2. Using the enter modifier on your @keydown event binding

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>

这篇关于vue.js专注于输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！