Vuejs2 Vue迭代循环json占位符

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

从“axios”导入axios；
导出默认值{
数据（）{
返回{
用户：[]
}
}
}
axios.get（）https://jsonplaceholder.typicode.com/users）。然后（（响应）=>{
this.users=response.data
console.log（this.users）；
})
//环路



{{user.name}}

{{user.email}

我试过

    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>

如果您尝试

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>


从“axios”导入axios；
导出默认值{
数据（）{
返回{
用户：[]
}
},
beforeMount:function（）
{
axios.get（）https://jsonplaceholder.typicode.com/users）。然后（（响应）=>{
this.users=response.data
})
console.log（this.users）；
}
}
//环路



{{user.name}}

{{user.email}



我试过

    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>

如果您尝试
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>


从“axios”导入axios；
导出默认值{
数据（）{
返回{
用户：[]
}
},
beforeMount:function（）
{
axios.get（）https://jsonplaceholder.typicode.com/users）。然后（（响应）=>{
this.users=response.data
})
console.log（this.users）；
}
}
//环路



{{user.name}}

{{user.email}



您的代码（如果不是复制粘贴打字错误）的问题是您的axios调用以不正确的方式丢弃在脚本部分，因此当您执行
this.user=data
时，您将永远无法访问组件的用户属性，您的函数必须位于
方法
属性中，或者位于像
挂载的
这样的lifecicle挂钩中，才能像spect一样工作

正确方法示例：

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

mounted() {
  this.loadUsers()
}

代码的问题（如果不是复制粘贴打字错误）是axios调用以不正确的方式丢弃在脚本部分中，因此当您执行
this.user=data
时，您将永远无法访问组件的用户属性，您的函数必须位于
方法
属性中，或者位于像
挂载的
这样的lifecicle挂钩中，才能像spect一样工作

正确方法示例：

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

mounted() {
  this.loadUsers()
}

您是否在
console.log（this.users）
中得到了正确的响应？是的。this.users有正确的响应。您是否在
控制台.log（this.users）
中得到正确的响应？是。这是用户的正确反应。