Recently, I encountered a problem that there is an edit button next to the input box. When you click it, you can edit the input box:

Effects to be achieved:

Autofocus was added to make it easier to type, but only the first and first click worked. I have checked some documents on the Internet, and it is said that it has something to do with dom rendering order and data cache. As for the deep-seated reason, I haven’t found it yet, and I hope you can tell me if you know. Then we use the custom instructions provided by Vue to solve the problem. One other thing to note is that after the page is rendered, the outer layer of el-Input is a div, and we need to get the input inside to have effect.

< EL-INPUT V-focus ></ EL-input > directives: {// Register a local custom DIRECTIVE V-focus focus: {// Definition of the directive Function (el) {// Focus element el.querySelector('input').focus()}},Copy the code

Another solution is to use vue.nexttick () and Ref to do this. I won’t write the examples, but instead manipulate the DOM.