[vue.js] template에서 id 셋팅하기

template에 radio 버튼이나 checkbox 만들고 label for로 라벨클릭시 선택되게 할려고 할 때

아래처럼 해줘야 인덱스가 id에 들어감.

 

예제> nodejs에서 쓸 경우

i는 for문 변수

idx는 외부 변수

<div v-for="i in count">
   <input type="radio" v-bind:id="\'"+idx+"\'+\'_\'+i" />
</div>

node.js에서 하면 편하다.

 

예제> node.js가 아닌 html에서 쓸 경우

 

template = ' \

<div v-for="i in count"> \

    <input type="radio"  v-bind:id="\'' + idx +'\'+ \'_\'+ i "  v-model="radio" /> \

</div> \

'

 

빨간색 작은따옴표( ' )는  template를 덮는 부분

파란색 \' 는 변수를  또는 추가로 붙일 문자에 넣음

보라색은 + 는 외부 변수 추가 용도

검은색 + 는 변수와 문자열을 연결하는 용도