4. 기본 데이터값을 모달에서 받아서 표출하는 방법

-테이블로 표현해 둔 목록에 있는 열의 수정을 선택하면 해당 부분의 데이터 값을 모달로 가져오는 기능이 필요하다.

 

-수정을 눌렀을 경우의 함수에 다음을 추가한다. 이때 정보는 MainView.js에서 export default의 data()항목에 배열로 정의가 되어 있다.

data(){
        return {
            todoList: [
                { id: 1, content: '테스트', manager: '김길동', status: '완료', dueDate: '2025-01-05', createdAt: '2025-01-02' },
                { id: 2, content: '예제', manager: '이영희', status: '미완료', dueDate: '2025-02-01', createdAt: '2025-01-10' },
            ],
            ...
        }
    },
 ...
  EditTodoModal(item){
            this.isModalViwed = true;
            this.isEdit = true;
            this.selectedData = item; //선택한 열 데이터를 저장한다.
        },
        ...

 

MainView.vue에서는 모달 태그와 수정 아이콘 클릭 이벤트를 수정한다.

...

<tbody>
          <tr v-for="(item, index) in todoList.slice().reverse()" :key="index">
            <td>{{ item.id }}</td> <!--ID-->
            <td>{{ item.content }}</td> <!--내용-->
            <td>{{ item.manager }}</td> <!--담당자-->
            <td>{{ item.status }}</td> <!--상태-->
            <td>{{ item.dueDate }}</td> <!--기한-->
            <td>{{ item.createdAt }}</td> <!--등록시간-->
            <td> <!--수정/삭제-->
              <img class="edit" alt="eidt" @click="EditTodoModal(item)" >
   ...
   
   <!-- closeModal은 modal페이지에서 닫는 걸 눌렀을때의 값을 받아서 닫기 이벤트를 활성화시킨다-->
    <PopupView v-if="isModalViwed || isEdit" @closeModal="CloseModal" :isEdit="isEdit"  :selectedData="selectedData" />

 

 

-이후에는 총괄 레이아웃이자 안의 내용물인 Addview.vue를 수정한다.

 

...
 <div>
                <span>기한<a class="red">*</a></span>
                <br/>
                <!--등록 레이아웃과 같이 쓰기 때문에 삼항연산자를 통해 등록일 경우 오늘 날자를, 수정일 경우 해당 데이터를 불러오도록 설정한다.-->
                <VueDatePicker :modelValue="todoData.dueDate ? new Date(todoData.dueDate) : picked" @update:modelValue="newDate => todoData.dueDate = newDate" />
            </div>
...
props: {
        isEdit: {
            type: Boolean,
            required: true,
        },
        selectedData: {
            type: Object,
            required: false
        },
    },
    data() {
        return {
            todoData: { ...this.selectedData }, // props를 로컬 데이터로 복사
        };
    },
...

 

- 데이터가 있는 값이 부모 컴포넌트이기 때문에 먼저 props에 해당 부분을 받는 걸 적는다. 이때 이 값은 부모 컴포넌트에서 :이름="값" 으로 태그 속성에 추가되어 있어야 한다.

 

- props로 불러온 부모 컴포넌트는 자식에서 직접 수정이 불가능 하므로 자식 컴포넌트의 변수에 한번 더 저장을 한다. 그 뒤에 수정이 가능하다.

 

-부모로부터 받은 값들을 태그에 넣기 위해서는 v-model를 사용한다.