

HTML

[code]

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

JS

[code]

    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()
        }
    },
    
[/code]

テキストをダブルクリックすることで、テキストをinputタグに変え、編集可能にする仕組みを作りました。

(コードはかなり省いているので、見えませんが、inputの中身を変更するとstoreのactionを発火し、stateの該当文字を変更するようになってます)

そこで、テキストをダブルクリックした時に自動的に、表示したinputタグに自動でフォーカスを当てたいです。  
どのようにすればよろしいでしょうか。

---マルチポストの報告---  
スタックオーバーフローはマルチポストが禁止されていないということで、英語版スタックオーバーフローの方でも聞きました。  
よろしくお願い致します。  
<https://stackoverflow.com/questions/52088691/vue-js-put-focus-on-input>


CC BY-SA 4.0
2018-08-29T10:44:04.433
47914
2018-08-30T07:23:16.870
2018-08-30T03:21:24.020
29725
29725
question
javascript html5 typescript vue.js
vue.js 指定したinputにフォーカスを当てる


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

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

[code]

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

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


CC BY-SA 4.0
2018-08-30T05:07:06.527
47930
2018-08-30T07:23:16.870
2018-08-30T07:23:16.870
2808
29725
47914
answer