vue.js Focus on specified input

Asked 2 years ago, Updated 2 years ago, 82 views

HTML

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

JS

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

By double-clicking on the text, we have created a mechanism to change the text to an input tag and make it editable.

(I can't see it because I've omitted a lot of code, but when I change the contents of input, the action of the store is ignited and the corresponding character of state is changed.)

Therefore, I would like to automatically focus on the input tag displayed when I double-click the text.
What should I do?

--- Multi-Post Reporting ---
I heard that stack overflow is not prohibited from multiposting, so I heard it from the English version of stack overflow.
Thank you for your cooperation.
https://stackoverflow.com/questions/52088691/vue-js-put-focus-on-input

javascript html5 typescript vue.js

2022-09-30 11:37

1 Answers

https://stackoverflow.com/a/52089309/4506703

You told me here.

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

It didn't seem to work unless the nextTick was an Arrow function...


2022-09-30 11:37

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.