Javascript 在Vue.js的HTML页面中显示动态数据

我试图通过在Vue和Axios中获取数据，在Html页面中显示账单结构。所以我有一张表，上面会列出订单。在表格的每一行中，我都有一个名为“Print”的按钮。因此，我试图归档的是，当单击“打印”按钮时，我需要在div中显示特定的订单详细信息。 我的方法是，首先我获取，在这一行中单击打印按钮，然后在该行中我将获取订单的OrderID，然后我尝试在JSON数组中获取订单详细信息（已经获取）

我不知道如何在脚本和HTML之间建立连接，以便仅使用

v-for

获取该顺序的详细信息。我试过的如下

获取ID的脚本

printBill(){
       // Get the row selected and get the Order Id first
    var rowSelected;
    var col;
    // Get the table
    var getTable = document.getElementById('table1');
    
    var tbody = getTable.getElementsByTagName('tbody')[0]
    var rows = tbody.getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
       rows[i].onclick = function() {
        rowSelect = this.rowIndex;
        console.log(this.rowIndex);
        
       for (var i=rowSelect;i<rowSelect+1;i++) {
       col= getTable.rows[i].cells[0].innerText;
       alert(col);       
       }
       }
    }      
  }

printBill（）{
//选择行并首先获取订单Id
选择变量；
var-col；
//收拾桌子
var getTable=document.getElementById（'table1'）；
var tbody=getTable.getElementsByTagName（'tbody'）[0]
var rows=tbody.getElementsByTagName（'tr'）；
对于（i=0；i对于（var i=rowSelect；i您应该将行代码封装在一个div中，并将
单击
操作与之关联。您的JS代码用于查找单击的行代码是无用的。在HTML中：



Id:{order.number}
{{order.date_created}}


{{order.billing.first_name+“”+orders.billing.last_name}


在JS代码中：

<script>
export default {
  methods: {
    rowDidClick(orderObjectThatHasBeenClicked) {
      // do stuff
    }
  }
}
</script>


导出默认值{
方法：{
rowDidClick（已单击的订单对象）{
//做事
}
}
}

检查，这是迄今为止编写的最好的文档之一。
谢谢您的回答。问题是，在我的表格中，每行都有一个按钮，相同的按钮。因此，当第一行按钮单击时，我试图显示第一行ID的订单详细信息。我不知道我是否错误地理解了您的答案。@Tom as onekiloparsec建议您需要使用vue呈现html表，然后可以配置每行中的callback on按钮以打开特定于行的顺序详细信息。
<script>
export default {
  methods: {
    rowDidClick(orderObjectThatHasBeenClicked) {
      // do stuff
    }
  }
}
</script>