[vue, nuxt] filter를 이용해 4자리 숫자 중 빈 자릿수를 0으로 채우기

table에서 넘버링을 할 때 0001, 0002 처럼 4자리 숫자로 맞추는 스크립트!

<tr v-for="(review, idx) in reviewList" :key="`review${idx}`">
    <td>{{review.id|numbering}}</td>
    <td>{{review.title}}</td>
    <td>{{review.reviewer}}</td>
    <td>{{review.date}}</td>
    <td>{{review.views}}</td>
</tr>

 

id에 0부터 숫자가 들어가있고, filters 중 numbering을 접목시켰따

numbering 함수를 보자

 

filters:{
    numbering(v){
        return v.toString().padStart(4,'0')
    }
}

 

padStart를 사용해서 총 4자리의 숫자로 셋팅하고, 그 자리를0 으로 채운다고 해준다.

주의할 점! padStart는 string요소만 사용이 가능해서 number인 id값을 문자열로 변환해줘야한다!