Vue3 To do list 만들기 (2)

이전 포스트에서 만든 todolist 객체에 테스트용 더미 데이터를 넣는다

  let todolist = ref([
    {id:1,sbj:'정보1'},
    {id:2,sbj:'정보2'},
    {id:3,sbj:'정보3'},
  ]);

 

출력하고자 하는 위치에 테스트를 해본다

<ul class="list-group">
<li class="list-group-item">
{{todolist[0].sbj}}
</li>

<li class="list-group-item">
{{todolist[1].sbj}}
</li>
</ul>

아직은 다소 지저분하지만 의도한대로 ul안에 li로 들어가있는 모습

이대로는 정적인 정보밖에 출력이 안되는 for문을 사용해보자

Vue3 (3만 되는지는 모르겠다 2는 안해봐서..) 에는 v-for 이 가능하다

이떄 v-bind:key 값이 필요한데 key는 중복되는지 아닌지를 식별하기 위함이다. sql로 치면 PK값 같은 느낌일지도?

 

<ul class="list-group" 
v-for="i in todolist" 
v-bind:key="i.id">

<li class="list-group-item">
{{i.sbj}}
</li>
</ul>

아무튼 ul 안에 for문과 key값을 적용해주면

li안에서는 객체 하나하나 i에 저장된다고 보면 된다

하드 코딩된 li를 지워도 동일한 값을 출력해준다

 

  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

전 포스트에서 Submit 함수를 통해 배열에 값을 추가할수 있게 되었으므로 당연히

동적으로 값이 추가되어 잘 나온다!!

 

 

---

(2) Vue3로 Todo List 만들기 예제 코드

<template>

<div class ="container">
  <h1>TodoList</h1>
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>

<div >
  <button class="btn btn-primary">
  추가
</button>
</div>
</form>
{{todolist}}

<ul class="list-group" 
v-for="i in todolist" 
v-bind:key="i.id">

<li class="list-group-item">
{{i.sbj}}
</li>
</ul>

</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let todo= ref("");
  let todolist = ref([
    {id:1,sbj:'정보1'},
    {id:2,sbj:'정보2'},
    {id:3,sbj:'정보3'},
  ]);
  
  var  Submit = ()=>{
  todolist.value.push({
    id: Date.now(),
    sbj:todo.value
  });

  }

  return {
    todo,Submit,todolist,
  }; 
}
}
</script>