Vue - 요소 대상에 대한 참조를 사용하는 refs 사용

Question

span class = "before-click"을 클릭하면
입력란을 숨기고 대신 입력 class = "after-click"이 표시됩니다.
그리고 나타난 입력 태그는 초점이 맞춰져 있어야합니다!
문제는 $ refs.afterClick을 사용하여 DOM에 액세스하고 .focus()를 주려고하면 예기치 않은 오류로 인해 .focus()가 함수가 아닌 것으로 나타납니다.
이 문제를 해결하는 방법은 무엇입니까? 감사합니다. .

Answer 1

랩 nextTick의 포커스 이벤트

var myApp = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    onEdit: false, 
 
    msg: 'Something in here', 
 
    }, 
 
    methods: { 
 
    switchAndFocus() { 
 
     if(!this.onEdit) { 
 
     this.onEdit = true; 
 
     this.$refs.afterClick.focus(); 
 
     } 
 
    }, 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span> 
 
    <input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit"> 
 
</div>

- DOM을 업데이트하고 입력을 표시 할 때까지이 포커스 이벤트를 연기한다.

https://vuejs.org/v2/api/#Vue-nextTick

var myApp = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    onEdit: false, 
 
    msg: 'Something in here', 
 
    }, 
 
    methods: { 
 
    switchAndFocus() { 
 
     if(!this.onEdit) { 
 
     this.onEdit = true; 
 
     this.$nextTick(function(){ 
 
     this.$refs.afterClick.focus(); 
 
     }); 
 
     } 
 
    }, 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span> 
 
    <input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit"> 
 
</div>