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 butto

Solution 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>exportdefault {
  methods: {
    rowDidClick(orderObjectThatHasBeenClicked) {
      // do stuff
    }
  }
}
</script>

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