반응형
ref 속성
- 자식 엘리먼트에 접근하는 기능
- 접근해서 데이터를 가져오는것은 가능하지만 엄연히 접근까지의 역할
- js의 getElementById, getElementsByClass ...등의 getElement 함수와 querySelector 함수와 같은 비슷한 역할
ref 사용
- vue.js가 '나도 여기 html 태그 값 좀 사용함~' 하고 좌표찍는 역할이라고 보면됨
- ref 속성을 부여한 자식 태그를 호출하기 위함
- vue.js와 html 모두 접근 가능!!
body
input태그에 ref 속성 추가
<input ref="answer" type ="text" v-model="value">
<body>
<div id="app">
<div>{{word}}</div><!--1-->
<form v-on:submit="onSubmitForm">
<input type ="text" v-model="value" ref="answer"><!--2-->
<button type="submit">입력</button>
</form>
<div id="result">{{result}}</div><!--3-->
</div>
</body>
ref 속성에 접근
this.$refs.answer.focus();
this.result='정답';
this.word = this.value;
this.$refs.answer.focus();Reference
반응형