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

Question

我正在尝试通过在 Vue 和 Axios 中获取数据来在 Html 页面中显示账单结构。所以我有一张表，其中将列出订单。在表格的每一行中，我都有一个名为“打印”的按钮。所以我要存档的是当单击打印按钮时，我需要在 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);       
       }
       }
    }      
  }

在结构中显示订单详细信息的 HTML

<div id="printToday" id="app1" style="border:3px solid black">
          <h2 align="center">Name</h2>
          <h4 align="center">Address</h4>
                   
          <p v-for="(orders, col) in todayOrders" id="p1">
       Id: {{orders.number}} <br> {{orders.date_created}} <br> <br/> 
        {{orders.billing.first_name + " " + orders.billing.last_name }}
           </p>
          </div>

Answer 1

您应该将行代码封装在一个 div 中，并将 click 操作与其关联。你的 JS 代码来查找哪个被点击是没用的。在您的 HTML 中：

<div v-for="(order, col) in todayOrders">
  <p @click="rowDidClick(order)">
     Id: {{order.number}} <br> {{order.date_created}} <br> <br/> 
        {{order.billing.first_name + " " + orders.billing.last_name }}
  </p>
</div>

在你的 JS 代码中：

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

查看Vue.js guide，它是迄今为止最好的文档之一。