我正在渲染一个列表,并有一个显示“展开”的按钮。我希望单击此按钮时,它会打开一个包含已获取内容的模式。
我正在尝试在数据内部呈现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/