时间戳

首页 > 解决方案 > Vue迭代循环json占位符

vuejs2 - Vue迭代循环json占位符

问题描述

我正在尝试在 Vue（使用 axios）中检索 json users 。显然它有效，但我不能（或者我不知道）如何迭代所有数组元素。问题很简单 ¿ 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>

标签： vuejs2

解决方案

我试过了

    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>

我有一个很好的结果：测试

我打印了我拥有的控制台：

测试控制台

我认为你没有得到你的结果的好方法：

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

推荐阅读