Warum erhalte ich in Vue beim Initialisieren des Arrays und Anzeigen der Ausgabe die Fehlermeldung „Eigenschaft von undefiniert kann nicht gelesen werden“?

Question

UsersPage.vue:

<script>
Standard exportieren {
    data:() =>({
        Benutzerliste: []
    }),
    Methoden:{
        asynchrone createUsersList(){
            this.usersList =wait fetch("https://jsonplaceholder.typicode.com/users").then((response)=> Response.json());
        }
    },
    erstellt(){
        this.createUsersList();
    }
}
</script>

<Vorlage>
    <ul>
    <li v-for="Benutzer in Benutzerliste" :key="user.id"><b>姓名:</b>{{user.name}}, <b>用户名:</b> {{user.username}},<b>邮编:</b> {{user.address.street}} </li>
    </ul>
</template>

und App.vue:

<script>
Importieren Sie UsersPage aus "./components/UsersPage.vue"

Standard exportieren {
  Komponenten: {
    Benutzerseite,
  },
  Daten: () => ({
    currentPage: "首页",
  }),
  Methoden: {
    showHomePage() {
      this.currentPage = "首页";
    },
    showLoginPage() {
      this.currentPage = "登录";
    },
  },
};
</script>

<Vorlage>
  <header class="header">
    <span class="logo">
      <img src="@/assets/vue-heart.png" width="30" />C'est La Vue
    </span>
    <nav class="nav">
      <a href="#" @click.prevent="showHomePage">首页</a>
      <a href="#" @click.prevent="showLoginPage">登录</a>
    </nav>
  </header>

  <Benutzerseite/>
</template>

Wenn ich jedoch „usersList“ in ein beliebiges Array mit einer beliebigen Anzahl von Elementen ändere (z. B. usersList:[1,2]), werden die Daten immer noch im richtigen Format angezeigt, jedoch in der Konsole des Browsers Folgender Fehler tritt auf:

Uncaught TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest „Straße“)
    unter UsersPage.vue:19:149
    bei renderList (runtime-core.esm-bundler.js:2894:22)
    bei Proxy._sfc_render (UsersPage.vue:19:163)
    bei renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    bei ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    bei ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    bei example.update (runtime-core.esm-bundler.js:5729:56)
    bei setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    bei mountComponent (runtime-core.esm-bundler.js:5525:9)
    bei ProcessComponent (runtime-core.esm-bundler.js:5483:17)

Warum erhalte ich diese Fehlermeldung, obwohl die Daten korrekt gerendert werden und die Adresse in https://jsonplaceholder.typicode.com/users vorhanden ist?

Answer 1

在你的v-for中，你使用了users.address.street。

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

因为它们是数字，它们的address是undefined。当你尝试访问undefined的任何属性时，你会得到你正在遇到的错误。

注意：如果你希望你的v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street。
文档： nullish coalescing operator。

---

另外，你不应该将你的迭代器命名为users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id"）。
但这并不改变当它是一个数字时，你无法访问它的address.street属性的事实。