Vue에서 렌더링된 목록 내에서 모달 열기

Vue에서 렌더링된 목록 내에서 모달 열기

목록을 렌더링하고 있는데 "확장" 버튼이 있습니다.이 버튼을 클릭하면 가져온 콘텐츠가 포함된 모달(modal)이 열립니다.

난 지금 그 그림을 그리려고 하고 있다.name(정확하게) 데이터를 렌더링하는 것과 같은 방법으로date소유물.이것은, 다음의 코드로 확인할 수 있습니다.

<li v-for="data in tableData" v-bind:key="data">
  <button v-on:click="openModal()">{{data.date}}</button>
  <sweet-modal ref="modal">{{data.name}}</sweet-modal>
</li>

모드를 여는 기능은 다음과 같습니다.

openModal(){
   // let vc = this; I have also tried calling vc.$refs.modal.open()
   this.$refs.modal.open()
}

나 지금 받고 있어this.$refs.modal.open is not a function그 이유는 제가 생각하기에this모달 열기 기능에서 어떤 교묘한 방법으로 사용되어야 합니다.

주요 문제는 각 목록 항목에 대해 모달 구성요소를 렌더링하고 있다는 것입니다. 원하는 것이 아닐 수 있습니다.

대신 다른 요소 외부에 모달 선언을 하고 목록 항목을 클릭하면 해당 항목이 변수에 저장되며 모달은 해당 변수의 내용을 표시합니다.

<template>
 <sweet-modal ref='modal'>
    {{crtSelectedItem.name}}
 </sweet-modal>

 <li v-for="data in tableData" v-bind:key="data">
    <button v-on:click='openModal(data)'>{{data.date}}</button>
</li>

<!-- ... -->
</template>

export default {
 data: () => ({ crtSelectedItem: null }),

 methods: {
  openModal (item) {
    this.crtSelectedItem = { ...item };
    this.$refs.modal.open();
  }
 }
}

언급URL : https://stackoverflow.com/questions/57539445/how-to-open-a-modal-inside-a-rendered-list-in-vue