代码之家 › 专栏 › 技术社区 › El Hombre Sin Nombre

Vue迭代循环JSON占位符

vuejs2

El Hombre Sin Nombre · 技术社区 · 7 年前

我试图在Vue(使用Axios)中检索JSON用户。很明显它是有效的,但是我不能(或者我不知道)如何迭代所有数组元素。问题很简单:一个循环在vue2中如何工作?

<script>
      import axios from 'axios';
      export default {
        data() {
          return {
            users: []
          }
        }
      }
      axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
        this.users = response.data
        console.log(this.users);
      })
    </script>

     //Loop

       <ul>
            <li v-for="user in users" :key="user.name">
              <p>
                <strong>{{user.name}}</strong>
              </p>
              <p>{{user.email}}</p>
            </li>
          </ul>

2 回复 | 直到 7 年前

DobleL 7 年前

代码的问题(如果不是复制粘贴错误)是您的axios调用没有以正确的方式被放入脚本部分,所以当您这样做时 this.user = data 您永远无法访问组件的用户属性,您的功能必须在 methods 属性或在lifecile hook中 mounted 为了能像你想象的那样工作。

正确方法示例:

methods: {
  loadUsers () {
    axios.get(...).then(users => this.users = users)
  }
},

mounted() {
  this.loadUsers()
}

alex 7 年前

我试过了

    export default {
            data() {
              return {
                userss: []
              }
            },
            beforeMount : function()
            {
                this.userss.push({name: 'bob', email: 'bob@'});
                this.userss.push({name: 'maria', email: 'maria@'});
                console.log('alex : ', this.userss);
                console.log('alex2: ', this.userss[0].name);
                console.log('alex3: ', this.userss[1].name);
          }

and 

                      <ul>
                        <li v-for="user in userss" :key="user.name">
                          <p>
                            <strong>{{user.name}}</strong>
                          </p>
                          <p>{{user.email}}</p>
                        </li>
                      </ul>

我有个好结果: test

我把控制台打印出来了:

test console

我认为你没有得到好的结果:

> axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
        this.users = response.data
        console.log(this.users);
      })

如果你试着 console.log(this.users); 在圈外,你不会有和我一样的东西

我认为你必须在安装之前让你的用户进入:

 <script>
          import axios from 'axios';
          export default {
            data() {
              return {
                users: []
              }
            },
           beforeMount : function()
            {
            axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{  
               this.users = response.data
             })
            console.log(this.users);
            }
          }

        </script>

         //Loop

           <ul>
                <li v-for="user in users" :key="user.name">
                  <p>
                    <strong>{{user.name}}</strong>
                  </p>
                  <p>{{user.email}}</p>
                </li>
              </ul>