我正在渲染一个列表,并有一个显示“展开”的按钮。我希望单击此按钮时,它会打开一个包含已获取内容的模式。

我正在尝试在数据内部呈现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();
  }
 }
}

关于javascript - 如何在Vue中的渲染列表中打开模态?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57539445/

10-11 06:54
查看更多