[Vuejs]-Vue.js: How can I create a dynamic key in v-for when key is a date?

:key is used to watch for changes, not necessarily for order.

2 things.

1. if you want to maintain a specific order the general solution is to use an array. Order of object (although there is a bit of method to the madness) cannot necessarily be counted upon.
2. I believe you should used a computed property to modify these as you require then iterate over that array instead of using the object directly for what it seems you are trying to do. Will be back will an edit adding code in a moment.

Edit1 –

General information about indexes in v-for. The word index is not some magic keyword. If you have nested v-for you can do this:

<div v-for="(stuff, index) in stuffing">
display stuff here, index is your key
  <div v-for="otherStuff, skdjdfhfyjsksj) in theOtherThings">
    skdjdfhfyjsksj is your key value here
  </div>
</div>

index is shown in examples to be clear but you can go with index2 or whatever else you would like there. It’s getting passed as the second argument and that’s where the magic happens.

Back to the base issue…So the format of your prop is messing me up mostly. Sorting the existing entries is straight forward but there really isn’t a key:value array in javascript. Those are objects. So where are you getting the documents prop from originally? Is that something you are creating to pass down or is it coming that way from an external source?

sorting of the dates can be done like this in computed, this doesn’t include the rest of the data yet as I’m not sure if you need to convert those on the fly or if we can change the prop before it gets here. I changed your document arrays to objects because the code would never show anything with that data formatted as an array as it complained about a missing ] since it did not expect the array key:value formatting.

https://jsfiddle.net/goofballtech/hmr6uw2a/65/

computed: {
    sortedDates(){
     return Object.keys(this.documents)
     .sort((a,b) => a > b ? 1 : 0)
    }
  },

Final request for this edit, can you show what you want the table to look like? Having that context would help in finding the optimal data structure to achieve the results you need.

Edit2 –
Assuming the object can be an array of objects, and there is potential to have more than one name/email per date array. The below would work.

It all hinges on those funky arrays though.

Might be easier for you to copy the raw return from the API and just go in in to sterilize the data so i can see how the arrays are formatted.

https://jsfiddle.net/goofballtech/hmr6uw2a/141/

<div v-for="(docDate, index) in sortedDates" :key="index">
  <h3>
  {{docDate.date}}
  </h3>
    <table class="table">
      <tr>
          <th>Name</th>
          <th>Email</th>
      </tr>
      <tr v-for="(item, index2) in docDate.data.length" :key="index2">
          <td>{{documents[docDate.date][index2].name}}</td>
          <td>{{documents[docDate.date][index2].email}}</td>
      </tr>
    </table>
  </div>