Comment initialiser les sous-éléments d'un tableau dans Vue

Question

J'essaie actuellement d'implémenter la lecture de tableaux à l'aide de Vue :

{{ this.locations[this.record.carton.LocationID - 1].Location }}

Bien que le code lui-même fonctionne correctement au moment de l'exécution, lors du premier chargement, il renvoie l'erreur suivante :

app.js:55125 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'Location')"

app.js:56401 TypeError: Cannot read properties of undefined (reading 'Location')
    at Proxy.render (app.js:49569:28)
    at VueComponent.Vue._render (app.js:58068:22)
    at VueComponent.updateComponent (app.js:58580:21)
    at Watcher.get (app.js:58994:25)
    at new Watcher (app.js:58983:12)
    at mountComponent (app.js:58587:3)
    at VueComponent.Vue.$mount (app.js:63593:10)
    at VueComponent.Vue.$mount (app.js:66507:16)
    at init (app.js:57639:13)
    at merged (app.js:57824:5)

J'ai essayé d'initialiser la valeur de Location comme ceci mais cela ne semble pas aider

return {
     data() {
        return {
            locations: {
                Location: ''
            },
        }
     }
 }

Answer 1

La manière courante de résoudre le problème consiste à définir des valeurs par défaut ou des gardes, ou les deux.

Default - Exactement comme vous avez essayé, sauf pour les tableaux, et notez que l'expression d'index calcule l'index par défaut...

return {
   data() {
      return {
        locations: [{ Location: '' }],
        record: { carton: { LocationID: 1 } }
      }
   }
 }

Mais cela semble un peu artificiel et fragile. Une autre façon est d'utiliser v-if pour protéger le tag...

  {{ locations[record.carton.LocationID - 1].Location }}

L'expression implique suffisamment pour justifier de la mettre dans une méthode.