Displaying dynamic data in HTML page from 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>

回答1:

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.

来源：https://stackoverflow.com/questions/64370588/displaying-dynamic-data-in-html-page-from-vue-js

标签

javascript

html

api

Vue.js