[vue.js] ref와 focus

보간법과 v-model 글에 이어,
구구단 게임을 할 수 있는 웹 페이지를 마저 완성시켜본다.

• v-on:이벤트명 => v-on: 을 통해서 어떤 이벤트를 다룰 수 있다. 일종의 eventListener라고 생각하자.

• e.preventDefault() => 특정 이벤트에서 페이지가 새로고침 되지 않게 하기 위함이다. 특히 SPA에서 중요.

• ref로 태그 네이밍 후 커서 위치를 focus로 input에 옮겨주기. ref='이름'으로 특정 태그에 이름을 지어줄 수 있다. $refs.이름으로 접근이 가능해진다

<div id="root">
    <div> {{first}} 곱하기 {{second}}(은)는?</div>        
    <form v-on:submit="onSubmitForm">
        <input type="number" ref="answer" v-model="value">
        <button type="submit">입력</button>
    </form>
    <div id="result"></div>
</div>
<script>
    const app = new Vue({
        el: '#root',
        data: {
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random) * 9),
            value: '',
            result: ''
        },
        methods: {
           onSubmitForm() {
               e.preventDefault();
            // e.preventDefault를 하지 않으면 이벤트 페이지가 새로고침 된다.
            if(this.first * this.second === parseInt(this.value)) {
                this.result = '정답!';
                this.first = Math.ceil(Math.random() * 9);
                this.second = Math.ceil(Math.random() * 9);
                this.value = '';
                this.$refs.answer.focus();
                //submit 이후 answer라는 이름으로 네이밍시킨 input 태그로 자동 focusing 된다
            } else {
                this.result = '땡!';
                this.value = '';
                this.$refs.answer.focus();
            }
           }
        }
    })
</script>