从 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屋!