Why in Vue, when the array is initialized and the output is displayed, I get the error "Cannot read property of undefined"?

Question

我有两个vue文件，App.vue和一个组件UsersPage.vue。

UsersPage.vue:

<script>
export default {
    data:() =>({
        usersList : []
    }),
    methods:{
        async createUsersList(){
            this.usersList = await fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
        }
    },
    created(){
        this.createUsersList();
    }
}
</script>

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

和App.vue:

<script>
import UsersPage from "./components/UsersPage.vue"

export default {
  components: {
    UsersPage,
  },
  data: () => ({
    currentPage: "首页",
  }),
  methods: {
    showHomePage() {
      this.currentPage = "首页";
    },
    showLoginPage() {
      this.currentPage = "登录";
    },
  },
};
</script>

<template>
  <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>

  <UsersPage/>
</template>

当我运行这个程序时，没有错误，并且输出仍然显示。However, when I change usersList to any array with any number of elements (e.g. usersList:[1,2]), the data is still displayed in the correct format, but in the browser's console The following error occurs:

Uncaught TypeError: Cannot read properties of undefined (reading 'street')
    at UsersPage.vue:19:149
    at renderList (runtime-core.esm-bundler.js:2894:22)
    at Proxy._sfc_render (UsersPage.vue:19:163)
    at renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    at mountComponent (runtime-core.esm-bundler.js:5525:9)
    at processComponent (runtime-core.esm-bundler.js:5483:17)

Why do I get this error, even though the data is rendered correctly and the address exists in https://jsonplaceholder.typicode.com/users?

Answer 1

In your v-for, you used users.address.street.

When you pass [1, 2] to usersList and Vue parses the items via v-for, it tries to read each number of address.street.

Because they are numbers, their address is undefined. You will get the error you are encountering when you try to access any property of undefined.

NOTE: If you want your v-for to be able to parse items without address without throwing an error, you can users .address.street is replaced with users.address?.street.
Documentation: nullish coalescing operator.

---

Also, you should not name your iterator users, as this may confuse you or other developers who need to modify this code as to what users is. . You should name it user (for example: v-for="user in usersList" :key="user.id").
But that doesn't change the fact that when it's a number, you can't access its address.street property.