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() {
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()
}
},
テキストをダブルクリックすることで、テキストをinputタグに変え、編集可能にする仕組みを作りました。
(コードはかなり省いているので、見えませんが、inputの中身を変更するとstoreのactionを発火し、stateの該当文字を変更するようになってます)
そこで、テキストをダブルクリックした時に自動的に、表示したinputタグに自動でフォーカスを当てたいです。
どのようにすればよろしいでしょうか。
---マルチポストの報告---
スタックオーバーフローはマルチポストが禁止されていないということで、英語版スタックオーバーフローの方でも聞きました。
よろしくお願い致します。
https://stackoverflow.com/questions/52088691/vue-js-put-focus-on-input