vuejs我怎样才能将我的数据传回给查看

时间:2018-05-08 14:26:53

标签: vue.js vuejs2 axios

任何人都可以帮助解释为什么我不能将我的阵列变成以下内容

HTML:

<table class="table table-hover">
        <thead>
        <tr>
            <td>ID</td>
            <td>Email</td>
            <td>Password</td>
        </tr>
        </thead>
        <tbody>
           <tr v-if="email" v-for="mail in email" :key="">
                <td>{{ allMyUsers.id  }}</td>
                <td>{{ allMyUsers.name }}</td>
                <td>{{ allMyUsers.email }}</td>
                <td></td>
            </tr>
        </tbody>
    </table>

我正在调用我的结果如下,我可以看到数组通过我的日志传递(我认为)但是真的很难理解我的问题

脚本:

import axios from 'axios';

导出默认{

computed: {
  allMyUsers () {
    return !this.$store.getters.alluser ? false : this.$store.getters.alluser
  },
},
created () {
  this.$store.dispatch('allUsers')
}

}

我获取数据的代码如下,并且肯定会返回数据,因为我可以在日志中看到它,只是不确定是否将其传递出去

    allUsers ({commit, state}) {
  if (!state.idToken) {
    return
  }
  globalAxios.get('/users.json')
    .then(res => {
      const data = res.data
      const allUsers = []
      for (let key in data) {
        const user = data[key]
        user.id = key
        allUsers.push(user)
     }
    commit('storeUser', allUsers)
  })
  .catch(error => console.log(error))
}

我的吸气器如下

   getters: {
    alluser (state) {
      return state.allUsers
    },
  }

})

任何支持都非常赞赏,因为我很新,所以仍在学习

非常感谢您的帮助到目前为止,我已经尝试按照您的指导,但没有任何回复,我现在没有错误

我的更新代码如下,我确信我会遵循您提供的指导

HTML:

        <tr v-if="myuser" v-for="myuser in allMyUsers" :key="">
          <td>{{ myuser.email }}</td>
          <td></td>
        </tr>

SCRIPT:

<script>
  import axios from 'axios';

  export default {

    computed: {

      allMyUsers () {
        return !this.$store.getters.myuser ? false : this.$store.getters.myuser
      },
    },
    created () {
      this.$store.dispatch('allMyUsers')
    }
  }
</script>

吸气剂:

myuser (state) {
  return state.myuser
},

功能:

allMyUsers ({commit, state}) {
     if (!state.idToken) {
       return
     }
        globalAxios.get('/users.json' + '?auth=' + state.idToken)
          .then(res => {
            const data = res.data
            const myusers = []
            for (let key in data) {
              const myuser = data[key]
              myuser.id = key
              myusers.push(myuser)
           }

        commit('storemyuser', myusers)
      })
    .catch(error => console.log(error))
  }

最后我的MUTATION:

storemyuser (state, myuser) {
  state.myuser = myuser
},

再次感谢你的帮助,你们真的非常善于帮助像我这样的新人学习

1 个答案:

答案 0 :(得分:1)

您的v-for循环不好,email属性未在您的组件中定义,您只定义了计算的allUsers属性(使用商店中的getter)。这是你需要使用的那个:

<tr v-if="user" v-for="user in allUsers" :key="">
  <td>{{ user.id  }}</td>
  <td>{{ user.name }}</td>
  <td>{{ user.email }}</td>
  <td></td>
</tr>