Vue.js 未呈现动态列表

我是VueJS的初学者，因此任何帮助都将不胜感激

因此，我试图显示API中的列表。我的API运行良好，因为我已经在Postman中对其进行了测试，但当我尝试根据API的响应创建列表时，列表不会显示。我做错了什么

这是我的html：

<div id="tabs">
    <ul>
            <li v-for="user in users">
                {{ user.userid }}
            </li>
    </ul>
</div>

{{user.userid}

这是我的js：

var tabs = new Vue({
        el: '#tabs',
        data: {
            users: []
        },
        mounted: function(){
            this.getAllUsers()
        },
        methods: {
            getAllUsers: function(){
                axios.get('<?php echo base_url(); ?>users/all_users')
                .then(function(response){
                    this.users = response.data
                    console.log(this.users)
                })
            }
        }
})

var选项卡=新的Vue({
el:'标签'，
数据：{
用户：[]
},
挂载：函数（）{
这是getAllUsers（）
},
方法：{
getAllUsers:function（）{
axios.get（'users/all_users'））
.然后（功能（响应）{
this.users=response.data
console.log（this.users）
})
}
}
})

这是控制台的屏幕截图，数据仅供测试。

在axios“then”方法中，您写道：

.then(function(response){
  this.users = response.data;
});

使用

function

关键字声明函数时，它会创建自己的上下文，因此

父作用域的该

值不会传递给函数

在Vue的情况下，子函数中的此不是预期的Vue实例

要解决这个问题，简单地说，或者

使用

.bind

.then(function(response){
  this.users = response.data;
}.bind(this));

使用箭头函数语法

.then(response => {
  this.users = response.data;
});

在axios“then”方法中，您可以写：

.then(function(response){
  this.users = response.data;
});

使用

function

关键字声明函数时，它会创建自己的上下文，因此

父作用域的该

值不会传递给函数

在Vue的情况下，子函数中的此不是预期的Vue实例

要解决这个问题，简单地说，或者

使用

.bind

.then(function(response){
  this.users = response.data;
}.bind(this));

使用箭头函数语法

.then(response => {
  this.users = response.data;
});

---

它正在被渲染。我在元素中检查了脚本，它显示了基本URL。它正在呈现。我在元素中检查了脚本，它显示了基本URL。@Adrian您是否使用PHP嵌入javascript代码，对吗？然后，我建议您使用

bind

，如果您没有使用像Babel这样的transpiler，那么使用数组函数的代码将无法在所有浏览器中工作。只是一个头球@FelipeGuizarDiaz嗨！不，我没有在PHP中嵌入javascript。谢谢你送我的头巾@Adrian您是否使用PHP嵌入javascript代码，对吗？然后，我建议您使用

bind

，如果您没有使用像Babel这样的transpiler，那么使用数组函数的代码将无法在所有浏览器中工作。只是一个头球@FelipeGuizarDiaz嗨！不，我没有在PHP中嵌入javascript。谢谢你送我的头巾！