vue를 이용해서 게시글 띄우는 코드 바꾸기

기존에 todolist 과제를 할때 게시글을 띄우기위해서

response_json.forEach(e => {
        document.getElementById('todo').innerHTML += "<details id='todo" + e.id + "' open></details>"
        todo = document.getElementById('todo' + e.id)
        todo.innerHTML = '<summary>' + e.id + '.   ' + e.title + '</summary>' +
            '<p>' + '내용:' + e.content + '</p>' +
            '<p>수행여부:<input type="checkbox" id=is_done' + e.id + 
            ' name="is_done" value="' + e.is_done + 
            '" onclick=is_done(' + e.id + ',' + e.is_done + ')></p>' +
            '<p><button onclick=tododelete(' + e.id + ')>삭제</button></p>'

        if (e.is_done == true) {
            date= new Date(e.completion_at)
            format = date.getFullYear() + '년' + (date.getMonth() + 1) + '월' + 
            date.getDate() + '일 ' + date.getHours() + '시' + date.getMinutes()+'분'
            todo.innerHTML = '<summary>' + e.id + '.   ' + e.title + '</summary>' +
                '<p>내용:' + e.content + '</p>' +
                '<p>완료시간:' + format + '</p>' +
                '<p><button onclick=tododelete(' + e.id + ')>삭제</button></p>'

        }
    });

해당 코드를 이용해서 받아온 게시글 리스트 파일을 foreach를 통해 돌린후 innerhtml으로 데이터를 집어넣었습니다

그러던 도중 다른조 팀원인 원XX님이 이걸왜 바닐라 js를 쓰냐고 하면서 vue에 대해 알려줘서 대충 문법만 검색해보고

모르는 부분을 검색해가면서 script 파일내에서 vue를 사용해봤습니다

<div id="todolist">
    <div v-for='todo in todos'>
        <details :id="'todo'+todo.id" open>
    <summary>{{todo.id}}. {{todo.title}}</summary>
            <p>내용:{{todo.content}}</p>
            <div v-if='todo.is_done'>
                <p>완료시간: {{todo.completion_at}}</p>
            </div>
            <div v-else>
                <p>수행여부:<input type="checkbox" v-bind:id="'is_done'+todo.id" name="is_done"
                v-bind:value="todo.is_done" v-on:click="is_done(todo.id,todo.is_done)"></p>
            </div>
            <p><button v-on:click="tododelete(todo.id)">삭제</button></p>
        </details>
    </div>
</div>

vue를통해 작성하니 v-for를 통해서 html페이지의 중복작성이 되게 간편하게 이루어져서 편하게 작업을 할수 있었습니다~