Question

我是VueJS的初学者，因此将不胜感激。

因此，我试图显示API中的列表。我在Postman中进行了测试，我的API正常运行，但是当我尝试根据API的响应创建列表时，该列表未显示。我在做什么错了？

这是我的html：

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

这是我的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)
                })
            }
        }
})

这是控制台的屏幕截图，数据仅供测试。 value of users after getting response from API

Answer 1

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

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

使用function关键字声明函数时，它会创建自己的上下文，因此其父范围的this值不会传递给该函数。

在Vue的情况下，子功能中的this不是预期的Vue实例。

要解决此问题，只需使用pass the parent's this value to the callback或use arrow functions。

使用.bind

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

使用箭头函数语法

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

Answer 2

<?php echo base_url(); ?>

我认为这不会在js文件中呈现。尝试硬编码您的baseURL。示例：

getAllUsers: function(){
    axios.get('http://app.test/users/all_users') // or axios.get('/api/users/all_users') if you're using an api based route for your api
    .then(function(response) {
         this.users = response.data
         console.log(this.users)
    })
}

动态列表未呈现

2 个答案: