[Vue.js] 내용 수정 모달 만들기

꾸미는건 포기하고 기능 먼저 만들었다.

 

table 내용 중 data1을 클릭하면 모달창이 나오도록 만들었다.

 

내가 원하는걸 찾아도 나오지 않아 짜증나서 만든 김에 내가 보려고 쓰는 중

 

Vue.js는 정말 잘 활용하면 좋은 친구이다.

그래서 공부를 더 해야한다. 하기 싫다.

 

 

WebView.vue

<template>
  <div v-show="isShow">
    <table>
    ...생략...
      <tr v-for="(datas, index) in dataArr" :key="index">
          <td @click="openModal(datas), (showModal = true)">
              {{ datas.data1 }}
          </td>
      ...생략...
      </tr>
    </table>
    <Modal
      v-if="showModal" :modalDatas="modalDatas" @close="showModal = false" />
  </div>
</template>

<script>
import Modal from "./common/Modal.vue";

export default {
  components: {
      Modal: Modal,
    },
  data() {
      return {
          showModal: false, //true일 때 모달창 보여짐
          modalDatas: [], //모달에 보낼 데이터 배열
          ...생략...
          };
  },
  methods: {
    openModal: function (event) {
      this.modalDatas = event;
    },
  }  
}

 

Modal.vue

<template lang="html">
  <transition name="modal">
    <div class="modal-mask" >
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <slot name="header"> </slot>
          </div>
          <div class="modal-body">
            <slot name="body">
          		... 생략 ...
            </slot>
          </div>
          <div class="modal-footer">
           <slot name="footer">
            CLOSE
        	<i class="closeModalBtn fa fa-times" aria-hidden="true" @click="$emit('close')"></i>
           </span>
          	</slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
	props: ["modalDatas"],
    data:function() {
        return{
          ...생략...
		}
    }
}
</script>