javascript - 如何在 Vue.js 中的对象字段上使用 v-for 时打印索引？

Question

所以我有这个对象(不是对象数组)，我想用序列号在表上循环它，我可以通过使用它的索引轻松地为对象数组做到这一点，但是对于对象，键是预定义的字符串。在这种情况下，我如何打印出 1 2 3 4 计数

我的思路一片空白

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

打印出 1 2 3 4 计数器

Answer 1

您可以添加第三个名为 index 的变量，例如:

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