How to open a modal inside a rendered list in Vue?

Question

I am rendering a list, and have a button that says "Expand". I want that when this button is clicked, it opens a modal with content that is fetched.

I'm trying to render the name inside the data, the same way I'm (correctly) rendering the date property. This can be seen in the following code:

<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>

And the function that opens the modal looks like this:

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

I'm getting a this.$refs.modal.open is not a function and I suspect that it is because this must be used in some clever way in the function that opens the modal.

Answer 1

我认为主要问题是您正在为每个列表项渲染模态组件，这可能不是您想要的。

相反，您可以做的是在任何其他元素之外声明模式，当您单击列表项时，您可以将该项目存储在变量中，然后打开模式，该模式将显示该变量的内容。

<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();
  }
 }
}