Javascript Vue.js-此.data未存储GET响应 欢迎来到Vue 负载
{{user.username} 新Vue({ el:“#应用程序”， 数据：{ 用户：[ {用户名：“比利”}， {用户名：“ryan”} ], }, 方法：{ sendTime:函数（）{ 获取（'/api/users'）） .然后（功能（响应）{ console.log（response.data）； this.users=response.data； }) .catch（函数（错误）{ console.log（错误）； }); }, } }) console.log返回- 数组[对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，还有15个…] 出于某种原因，我似乎无法将此数组分配给“this.data”？单击该按钮时，唯一的更改是一个新的console.log，但会显示数据中的两个默认用户。任何帮助都将不胜感激Javascript Vue.js-此.data未存储GET响应 欢迎来到Vue 负载,javascript,get,vue.js,axios,Javascript,Get,Vue.js,Axios,{{user.username} 新Vue({ el:“#应用程序”， 数据：{ 用户：[ {用户名：“比利”}， {用户名：“ryan”} ], }, 方法：{ sendTime:函数（）{ 获取（'/api/users'）） .然后（功能（响应）{ console.log（response.data）； this.users=response.data； }) .catch（函数（错误）{ console.log（错误）； }); }, } }) console.log返回- 数组[对象，
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendTime">Load</button>
<div v-for="user in users">
<p>{{ user.username }}</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: [
{ username: "billy" },
{ username: "ryan" }
],
},
methods: {
sendTime : function () {
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
this.users = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}
})
</script>
</body>
</html>
请参见您可以维护对Vue对象的引用，然后在回调中使用该引用
axios.get(...).then(function(response){
this.users = response.data;
}.bind(this))
您可以维护对Vue对象的引用，然后在回调中使用该引用
axios.get(...).then(function(response){
this.users = response.data;
}.bind(this))
使用闭包、绑定或胖箭头函数为承诺回调捕获正确的“this”。使用闭包、绑定或胖箭头函数为承诺回调捕获正确的“this”。