- vuejs를 처음 사용해보았기에 복습과 정리를 위해 작성합니다. 틀린 부분은 알려주시면 감사하겠습니다~. 과제로 진행한 프로젝트라 많은 부분의 코드들이 생략 되어있습니다.
v-data-table
- vuetify에서 제공해주는 컴포넌트이다.
- 이 컴포넌트에서 click:row라는 이벤트를 제공해주는데 클릭시 해당 행의 데이터를 추출해준다.
#click:row
Emits when a table row is clicked. This event provides 2 arguments: the first is the item data that was clicked and the second is the other related data provided by the item slot. NOTE: will not emit when table rows are defined through a slot such as item or body. - 행 클릭시 모달이 나오고, 그 모달에 클릭한 행의 데이터를 보여주고 싶어서 아래와 같이 코드를 작성했다.
<template>
<v-card>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
@click:row="handleClick(item)" --> 문제의 부분
v-b-modal.modal-lg --> 문제의 부분
></v-data-table>
</v-card>
<b-modal id="modal-lg" size="lg">
...생략...
</b modal>
</template>
<script>
...생략...
export default {
methods: {
handleClick(item) {
this.userInfo = item;
},
}
}
</script>- 진한 글씨만 봐도 된다.
- 의도대로 클릭 이벤트와 모달은 잘 동작하였지만, 문제는 행이 아닌 테이블 어느 부분을 클릭하더라도 모달이 나오는 것이었다. 코드를 보면 data-table 자체에 모달을 삽입했기 때문인데, 알면서도 이렇게 작성한 이유가 있다.
- 나는 html에 대해 기초적인 부분만 알고, css에 시간을 아끼고 싶었기 때문에 현재 프로젝트를 진행하면서 프론트 쪽은 외부 컴포넌트를 가져와 사용하고 있었다. 그래서 직접 테이블과 모달을 작성하면 생기지 않을 문제지만 난 꼭 v-data-table과 b-mobal을 쓰고 싶었기에 해결 과정을 벨로그에 공유해본다.
- 결론은 data-table의 행만 제어할 수 있도록 v-data-table에서 자동으로 행을 그려주도록 하는 것이 아닌 아래와 같이 v-slot을 사용해서 직접 행을 그려준 뒤, 거기에 클릭 이벤트와 모달을 작성해주면 된다..!
<template v-slot:item="{ item }">
<tr @click="handleClick(item)" v-b-modal.modal-lg>
<td>{{ item.IdNo }}</td>
</tr>
</template>전체 코드
<template>
<v-card>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
>
<template v-slot:item="{ item }">
<tr @click="handleClick(item)" v-b-modal.modal-lg>
<td>{{ item.IdNo }}</td>
</tr>
</template>
</v-data-table>
</v-card>
<b-modal id="modal-lg" size="lg">
...생략...
</b modal>
</template>
<script>
...생략...
export default {
methods: {
handleClick(item) {
this.userInfo = item;
},
}
}
</script>
하삐