×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,588,506명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형

Vue에서 textarea 혹은 input을 v-for로 다룰 때, v-model을 통해 watch를 하고 싶을 경우가 있는데

생각보다 dynamic watch를 어떻게 해야할 지 감이 오지 않을 수 있다.

 

이럴때 사용 할 수 있는 기법이 아래와같다.

 

<div id="demo">
	<div v-for='n in 3'>
	<textarea v-model="form.data[n]"></textarea>
	</div>
	<div v-for='n in 3'>
		{{ form.data[n] }}
	</div>
</div>

 

var data = {
    form: {
        data: []
    }
}

var demo = new Vue({
	el: '#demo',
	data: data
})

 

v-model을 form json의 id array로 잡아주고, 해당 data의 인덱스를 v-model에 바인딩해주면

 

v-for에서 여러개의 textarea에서 적히는 데이터들은 각 index 번호에 맞는 form.data로 들어가게 된다.

 

해당 코드는 아래 링크에서 테스트를 해볼 수 있다.

 

https://jsfiddle.net/www_crocus_co_kr/j89br56n/1/

 

Edit fiddle - JSFiddle - Code Playground

 

jsfiddle.net

 

 

반응형