[Vue] Vue 모달창 띄우는 방법

😊 Vue 는 이미 세팅이 되어 있다고 가정,

 

vue 프로젝트 생성 방법

https://o-ohi-code.tistory.com/9

[Vue] vue 프로젝트 생성 방법

 

 

1. 버튼을 만들어 준다. 

<VBtn class="mr-3" @click="showModal = true">
 품질관리
</VBtn>

품질관리 버튼을 클릭시 showModal = true 로 변경된다.

 

2. showModal = 기본값을 설정

// showModal 의 기본값은 false : 화면에 안보이는 상태
const showModal = ref(false)

// 닫기 버튼을 클릭시 true 인 showModal 상태를 다시 false 로 변경
const closeModal = () => {
  showModal.value = false;
}

const headers = [
  { title: '검사방법', sortable: false, key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '품목명', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '시료', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '적격', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '부적격', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '합격여부', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
]

기본값이 false 여야 처음에는 화면에 보이지 않다가 

품질관리 버튼을 클릭 시 true 로 변경이 되어 우리 눈에 보이게 만들었다.

 

3. showModal = true 가 될 경우 눈에 보이는 코드

// 자신의 선호에 맞게 코드 변경 가능
<v-dialog v-model="showModal" max-width="800px">
	<v-card>
    	<v-card-title class="headline">품질검사현황</v-card-title>
       	<v-card-text>
        	<v-data-table
            	:headers="headers"
                :items="infodataDetail"
                :items-per-page="10"
                height="200"
                fixed-header
            >
            </v-data-table>
        </v-card-text>
        <v-card-actions>
        	<v-btn color="blue darken-1" text @click="closeModal">닫기</v-btn>
        </v-card-actions>
	</v-card>
</v-dialog>

 

전체 코드

<template>
<VBtn class="mr-3" @click="showModal = true">
 품질관리
</VBtn>

// 자신의 선호에 맞게 코드 변경 가능
<v-dialog v-model="showModal" max-width="800px">
	<v-card>
    	<v-card-title class="headline">품질검사현황</v-card-title>
       	<v-card-text>
        	<v-data-table
            	:headers="headers"
                :items="infodataDetail"
                :items-per-page="10"
                height="200"
                fixed-header
            >
            </v-data-table>
        </v-card-text>
        <v-card-actions>
        	<v-btn color="blue darken-1" text @click="closeModal">닫기</v-btn>
        </v-card-actions>
	</v-card>
</v-dialog>
</template>

<script>

// showModal 의 기본값은 false : 화면에 안보이는 상태
const showModal = ref(false)

// 닫기 버튼을 클릭시 true 인 showModal 상태를 다시 false 로 변경
const closeModal = () => {
  showModal.value = false;
}

const headers = [
  { title: '검사방법', sortable: false, key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '품목명', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '시료', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '적격', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '부적격', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
  { title: '합격여부', key: '서버에서 데이터를 받아온 컬럼명' , width:120},
]
</script>