Vue.js Vue-无法在计算属性V-for中读取null的属性0

我使用Vue的computed属性来创建一个数组，该数组只包含我从多个数组中需要的数据

问题是，当我使用V-for在数组中循环时，我得到的错误是

Cannot read property '0' of null

这对我来说是公平的

• 设置一个单独的变量，表示数据已加载（v-if=“dataload”），因此运行for循环
• 在运行for循环之前，检查数组的长度是否大于零（v-if=“mappedUsers.length>0）
• 在运行for循环之前检查变量是否存在（v-if=“mappedUsers”）

html

---

我做错了什么？检查Vue加载项，mappedUsers会正确返回。

如果我必须猜测，问题在于

这个。usersAuth[0]

。它是什么？Prop，data，computed？它是否曾经为null？您的其余代码看起来很好，除了可能没有检查

这一点。用户

是一个数组。它是对firebase的API调用，在created（）中完成.我会用信息更新主要帖子创建的

钩子不等待API调用，因此您需要在计算属性中设置一个条件，以检查
用户
和
用户身份验证
是否都已设置。您可以，但您需要编写可以计算的代码，并在该属性的任何可能状态下返回值它取决于，包括那些属性为空的时间。例如，
if（！Array.isArray（this.users）| |！Array.isArray（this.userAuth））返回[]
因此，如果我用而不是v-if=“mappeduser”包装mappeduser v-for，它会起作用！感谢您对我的解释，现在更清楚了。如果我不得不猜测的话，问题在于
this.usersAuth[0]
。它是什么？Prop，data，computed？它是否曾经为null？您的其余代码看起来很好，除了可能没有检查
这一点。用户
是一个数组。它是对firebase的API调用，在created（）中完成.我会用信息更新主要帖子创建的
钩子不等待API调用，因此您需要在计算属性中设置一个条件，以检查
用户
和
用户身份验证
是否都已设置。您可以，但您需要编写可以计算的代码，并在该属性的任何可能状态下返回值它取决于，包括那些属性为null的时间。例如，
if（！Array.isArray（this.users）| |！Array.isArray（this.userAuth））返回[]
因此，如果我将mappeduser v-for包装为v-if=“mappedUsers”，它就可以工作了！感谢您对我的解释，现在更清楚了。
<div v-if="mappedUsers">
     <tr v-for="(mappeduser, index) in mappedUsers" :key="mappeduser.uid">
       <td>{{mappeduser.uid}}</td>
       <td>{{mappeduser.email}}</td>
       <td>{{mappeduser.email}}</td>
       <td>{{mappeduser.email}}</td>
      <td>
         <select class="selectpicker" @change="changeRole(mappeduser.uid, $event)">
            <option :selected="mappeduser.role.superadmin" value="admin">SuperAdmin</option>
            <option :selected="mappeduser.role.admin" value="admin">Admin</option>
            <option :selected="mappeduser.role.customer" value="customer">Customer</option>
          </select>
        </td>
      <td><button type="button"  v-on:click="deleteUser(user.uid)" class="btn btn-danger">Delete</button></td>
      <td>
         <span v-if="mappeduser.disabled === true"> <button type="button" v-on:click="enableUser(mappeduser.uid, index)" class="btn btn-success">Enable</button></span>
         <span v-if="mappeduser.disabled === false"><button type="button" v-on:click="disableUser(mappeduser.uid, index)" class="btn btn-primary">Disable</button></span>
      </td>
       <td><button type="button"  v-on:click="listAllUsers()"  class="btn btn-info">Reset Pwd</button></td>
      <td><button type="button" class="btn btn-warning">Reset Acnt</button></td>
      </tr>
  </div>

omputed: {
    mappedUsers: function () {
      // map the user objects into one object in an  useable array
      const filteredArray = []
      for (let i = 0; i < this.users.length; i++) {
        let newdata = []
        newdata.push(this.users[i], this.usersAuth[i])
        newdata = Object.assign(...newdata)
        filteredArray.push(newdata)
      }
      const filterElements = filteredArray.map((user) => {
        return ({ uid: user.id, email: user.email, disabled: user.disabled, role: user.role })
      })

      return filterElements
    }
  },


const addMessage = firebase.functions().httpsCallable('listAllUsers')
    addMessage()
      .then(result => {
        this.usersAuth = result.data.users
      })

    firebase.auth().onAuthStateChanged((user) => {
      this.user = user
    })

    this.users = []
    firebase
      .firestore()
      .collection('roles')
      .get()
      .then(snap => {
        snap.forEach(doc => {
          const user = doc.data()
          user.id = doc.id
          this.users.push(user)
        })
      })