개요

v-for 동적 변화의 정수 DOM을 만들 때 저는 약간 빠져서 필기입니다.
제가 이런 코드를 썼어요.
HTML

<div id = "vue">
    <input type="button" @click="add" value="add">
    <input type="number" v-model="count">
    <div v-for="n in count">{{count}}</div>
</div>

JS

let app= new Vue({
    el : "#vue",
    data : {
        count : 2
    }
    methods : {
        add : function(){
            this.count++;
        }
    }
})

기대하는 내용은 단지 count의 수량에 따라 여러 개div의 간단한 내용을 생성할 뿐이다

문제

add 중 증가count의 경우div도 문제없이 증가하였으나, textbox 직접 수정치에서 다음과 같은 문제가 발생하였다
입력5
입력10

원인 및 해결 방법

textbox에서 v-model 사이의 값이 전달될 때string형으로 바뀌었기 때문이다.따라서 110010000과charv-for가 증가할 때마다 순환하는 것을 확인할 수 있다.
피하려면 다시 쓰십시오.
HTML

<div cd = "vue">
    <input type="button" @click="add" value="add">
    <input type="number" v-model="count">
    <div v-for="n in parseInt(count,10)">{{count}}</div>
</div>

JS

let app= new Vue({
    el : "#vue",
    data : {
        count : 2
    }
    methods : {
        add : function(){
            this.count++;
        }
    }
})

이렇게 하면 문제 없이 순환할 수 있다