TypeScript - Durch ein Record in Vue iterieren

Wie können wir in Vue über eine Variable vom Typ Record<string, string[]> iterieren? Meine Variable enthält ein Schlüssel-Wert-Wörterbuch, das so aussieht:

errors = {
  'username': ['Must contain at least 1 special character', 'Min length is 6'],
  'password': ['Required']
}

Ich habe das versucht, aber Vue (oder TS oder ESLint, bin mir nicht sicher) ist nicht zufrieden:

<ul>
  <li v-for="e in errors" :key="e">
    {{ e }}
    <ul>
      <li v-for="e2 in e" :key="e2">
        {{ e2 }}
      </li>
    </ul>
  </li>
</ul>

Es zeigt diesen Fehler für den ersten :key oben an:

`Typ 'string[]' ist keinem Typ 'string | number | symbol | undefined' zuweisbar`

Übrigens, ich benutze Vue 3 mit TS. errors ist Teil eines Interfaces und ist definiert als Record<string, string[]>.

Antwort #1

Gefunden. Die äußere Schleife muss ihre Variable als Array so deklarieren:

<ul>
  <li v-for="[cat, errs] in msg.errors" :key="cat">
    {{ cat }}
    <ul>
      <li v-for="e2 of errs" :key="e2">
        {{ e2 }}
      </li>
    </ul>
  </li>
</ul>