Vue.js-Modal似乎无法在表中工作

我的目标是有一个按钮，它将使用对话框或模式框显示每行中的特定数据。首先，我将显示在主索引文件中创建对话框的脚本代码：

var dialog=document.querySelector（'dialog'）；
//如果此应用程序将在除CHROME和OPERA之外的其他浏览器中运行，请取消注释以下代码
如果（！dialog.showmodel）{
dialogPolyfill.registerDialog（对话框）；
}

此代码：

var dialog = document.querySelector('dialog');

if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}

初始化一个对话框元素。但是代码现在可能呈现许多对话框（因为一个表中有多行）。我怀疑您想使用

querySelectorAll

初始化所有对话框，并循环遍历结果。此初始化代码需要在

挂载的

生命周期处理程序中处理，您需要跟踪单击按钮时要打开的对话框

是的，在某种程度上，在表中呈现代码会导致代码中断，但这主要是因为现在可能有很多对话框

下面是一个示例（需要支持

对话框

元素的浏览器）

console.clear（）
新Vue({
el:“应用程序”，
数据：{
人民:[
{
姓名：“鲍勃”，
留言：“你好，鲍勃”
},
{
姓名：“玛丽”，
留言：“你好，玛丽”
},
{
姓名：“简”，
信息：“你好，简”
},
]
}
})

{{person.name}
打招呼
{{person.message}
接近

因此，如果我想用我目前的方法来实现，也就是将模态动作放在脚本中，而不是放在html部分（我将来需要它），它需要我传递对话框的当前数组以及所需的信息，对吗？像

@click=“showMeasurements（$refs.messageDialog[ndx]，order.id）”

@Kaddy03如果您想在单击时调用一个方法，当然，只需在循环中传递当前项的索引。ref不需要传递，它将作为

this.$refs.messageDialog

提供。不过很奇怪，为什么您建议将它放在

已装入的
中，而不是放在
已创建的
生命周期中？@Kaddy03在装入之前，对话框元素不存在。您必须等到那时才能运行与DOM一起工作的外部代码。