Question

我试图在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>

Answer 1

我试过

    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);，那么你将不会拥有与我相同的东西

我认为你必须尝试让你的用户进入beforemount：

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

Answer 2

您的代码问题（如果它不是复制粘贴拼写错误）是您的axios调用在脚本部分中以不正确的方式进行了调整，因此当您执行this.user = data时，您将永远无法访问该组件的用户属性，你的功能必须在methods属性内，或者在mounted之类的生命链中，以便像你一样工作。

关于正确方法的示例：

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

mounted() {
  this.loadUsers()
}

Vue迭代循环json占位符

2 个答案: