Vue textarea의 Dynamic v-model

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로 들어가게 된다.