Pourquoi dans Vue, lorsque le tableau est initialisé et que la sortie est affichée, j'obtiens l'erreur « Impossible de lire la propriété non définie » ?

Question

UsersPage.vue :

<script>
exporter par défaut {
    données :() =>({
        Liste des utilisateurs : []
    }),
    méthodes :{
        asynchrone createUsersList(){
            this.usersList = wait fetch("https://jsonplaceholder.typicode.com/users").then((response)=> réponse.json());
        }
    },
    créé(){
        this.createUsersList();
    }
}
</script>

<modèle>
    <ul>
    <li v-for="utilisateur dans la liste des utilisateurs" :key="user.id"><b>姓名:</b>{{user.name}}, <b>用户名:</b> {{user.username}},<b>邮编 :</b> {{user.address.street}} </li>
    </ul>
</template>

和App.vue :

<script>
importer UsersPage depuis "./components/UsersPage.vue"

exporter par défaut {
  Composants: {
    Page Utilisateurs,
  },
  données : () => ({
    currentPage : "首页",
  }),
  méthodes : {
    showHomePage() {
      this.currentPage = "首页";
    },
    showLoginPage() {
      this.currentPage = "登录";
    },
  },
} ;
</script>

<modèle>
  <header class="en-tête">
    <span class="logo">
      <img src="@/assets/vue-heart.png" largeur = "30" />C'est La Vue
    </envergure>
    <nav class="nav">
      <a href="#" @click.prevent="showHomePage">首页</a>
      <a href="#" @click.prevent="showLoginPage">登录</a>
    </nav>
  </en-tête>

  <PageUtilisateurs/>
</template>

Cependant, lorsque je remplace usersList par n'importe quel tableau contenant un nombre quelconque d'éléments (par exemple usersList:[1,2]), les données sont toujours affichées dans le format correct, mais dans la console du navigateur. l'erreur suivante se produit :

Uncaught TypeError : impossible de lire les propriétés d'undefined (lecture de 'street')
    sur UsersPage.vue : 19:149
    sur renderList (runtime-core.esm-bundler.js:2894:22)
    à Proxy._sfc_render (UsersPage.vue:19:163)
    à renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    sur ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    sur ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    à instance.update (runtime-core.esm-bundler.js:5729:56)
    à setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    sur mountComponent (runtime-core.esm-bundler.js:5525:9)
    à processComponent (runtime-core.esm-bundler.js:5483:17)

Pourquoi est-ce que j'obtiens cette erreur, même si les données sont correctement restituées et que l'adresse existe dans https://jsonplaceholder.typicode.com/users ?

Answer 1

Dans votre v-for中，你使用了users.address.street.

Quand tu le feras [1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street.

Parce qu'il s'agit de nombres, vous obtiendrez l'erreur que vous rencontrez lorsque address是undefined。当你尝试访问undefinedutiliserez des propriétés dessus.

NOTE : Si vous souhaitez votre v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street.
Documentation : opérateur de coalescence nul.

---

De plus, vous ne devriez pas nommer vos itérateurs users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id").
Mais cela ne change rien au fait que lorsqu'il s'agit d'un numéro, vous ne pouvez pas accéder à sa propriété address.street.