从 Vue.js 在 HTML 页面中显示动态数据 [英] Displaying dynamic data in HTML page from Vue.js

问题描述

我试图通过在 Vue 和 Axios 中获取数据来在 Html 页面中显示账单结构.所以我有一个表格，其中列出了订单.在表格的每一行中，我都有一个名为打印"的按钮.所以我想要存档的是当点击打印按钮时，我需要在一个 div 中显示特定的订单详细信息.我的方法是，首先我得到，在哪一行点击打印按钮，然后在该行中我将获得订单的 OrderID，然后我试图在 JSON 数组中获取订单详细信息(已获取).

我无法意识到如何在脚本和 HTML 之间建立连接，以便仅使用 v-for 来获取该订单的详细信息.我试过的如下.

获取ID的脚本

printBill(){//获取选中的行，先获取Order Idvar rowSelected;var col;//获取表var getTable = document.getElementById('table1');var tbody = getTable.getElementsByTagName('tbody')[0]var rows = tbody.getElementsByTagName('tr');for (i = 0; i < rows.length; i++) {行[i].onclick = function() {rowSelect = this.rowIndex;console.log(this.rowIndex);for (var i=rowSelect;i

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

<h2 align="center">名称</h2><h4 align="center">地址</h4><p v-for=(orders, col) in todayOrders"id=p1">编号:{{orders.number}} 
{{orders.date_created}} 
<br/>{{orders.billing.first_name + ""+ orders.billing.last_name }}</p>

解决方案

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

<p @click="rowDidClick(order)">编号:{{order.number}} 
{{order.date_created}} 
<br/>{{order.billing.first_name + ""+ orders.billing.last_name }}</p>

在您的 JS 代码中:

查看 Vue.js 指南，这是迄今为止最好的指南之一编写的文档.

I am trying to display bill structure in Html page from getting the data in Vue and in Axios. So i have a table where orders will be listed. In each row of the table I have a button named "Print". So what I am trying to archive is when the Print button clicked, I need to display the particular order details in a div. My method is, first I am getting, in which row the Print button is clicked then in that row i ll get the OrderID of the order, then I am trying to get the Order details in the JSON array(Already fetched).

I could not realize How i can make connection between the Script and the HTML to say to get that details of that order only using v-for only. What I tried is below.

Script to get the 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 to display order details in a structure

<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>

解决方案

You should encapsulate your row code inside a div, and associate a click action to it. Your JS code to find which one is clicked is useless. In your 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>

In your JS code:

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

Check the Vue.js guide, it is by far one of the best documentation written.

这篇关于从 Vue.js 在 HTML 页面中显示动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！