vue.js 将重点放在输入上

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

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

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

控制台上没有错误，但没有工作。

原文由 Kuru 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

立即地。你可以让你的代码正常工作

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

但是，我认为您会遇到更多问题，并且您的代码可以变得更简单。

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

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

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

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

 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://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></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>

原文由 Phil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您想在单击某些内容后设置焦点并使用 vue js 设置焦点显示输入文本框

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

并为此使用自定义指令。如果您需要它应该在点击时工作，然后点击设置

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

并使用它

<input v-focus> or <input v-click>

enter code here

原文由 ritesh 发布，翻译遵循 CC BY-SA 4.0 许可协议