0

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

1 件の回答 1

1

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

こちらで、教えてくださりました。

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

nextTickの中をアロー関数にしないとうまくいかないみたいでした...。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。