How to print indexes while using v-for on object fields in Vue.js?

Question

So i have this object (not array of objects) and i want to loop it on table with serial numbers, I could do this easily for array of objects by using its index, but in case of object, the key is predefined strings. in this case how can i print out 1 2 3 4 count

My ideas are totally blank

orders = {
    "54VwKBJiUOT9T6tkZBIB": {
        "created_at": {
            "seconds": 1564894948,
            "nanoseconds": 819000000
        },
        "customer": {
            "address": "fasdfsdf",
            "fname": "ualala",
            "lname": "oLLx",
            "registered_on": "kathmandu",
            "username": "9qHyd"
        },
        "delivery_charge": "64",
        "drop_datetime": {
            "seconds": 1564600500,
            "nanoseconds": 0
        },
        "drop_location": "Dolorem optio est ",
        "order_date": {
            "seconds": 1566238500,
            "nanoseconds": 0
        },
        "order_type": "urgent",
        "pickup_datetime": {
            "seconds": 1566330300,
            "nanoseconds": 0
        },
        "pickup_location": "Laboriosam in iure ",
        "price": "294",
        "status": "pending",
        "updated_at": {
            "seconds": 1564894948,
            "nanoseconds": 819000000
        },
        "vat_amount": "77"
    },
    "8WhmWMdh4JViA3kmRXBn": {
        "created_at": {
            "seconds": 1564894977,
            "nanoseconds": 980000000
        },
        "customer": {
            "fname": "Sarojdfd",
            "id": "736794115fd942efaaa7",
            "lname": "dt7w"
        },
        "delivery_charge": "64",
        "drop_datetime": {
            "seconds": 1564600500,
            "nanoseconds": 0
        },
        "drop_location": "Dolorem optio est ",
        "order_date": {
            "seconds": 1566238500,
            "nanoseconds": 0
        },
        "order_type": "urgent",
        "pickup_datetime": {
            "seconds": 1566330300,
            "nanoseconds": 0
        },
        "pickup_location": "Laboriosam in iure ",
        "price": "294",
        "status": "pending",
        "updated_at": {
            "seconds": 1564894977,
            "nanoseconds": 980000000
        },
        "vat_amount": "77"
    }
}

print out 1 2 3 4 counter

Answer 1

You could add a third variable called index like :

 <div v-for="(field,key,index) in object">

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      object: {
        "id": 2,
        "name": "Oneal Clark",
        "informations": "some info",
        "biliography": "some info"

      }
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <div v-for="(field,key,index) in object">
    {{index}}
  </div>
</div>