vue.js - 在 axios 之后 vuejs 没有更新
问题描述
模板:
<h5>{{ this.phonelist.length }}</h5>
// 本来1
,axios调用后应该是2
脚本:
import axios from "axios";
export default {
data: function() {
return {
phonelist: [
{
name: "test"
}
]
},
methods: {
auth() {
var self = this;
// get token
axios
.post(
"API_URL",
{
headers: {
accept: "application/json"
}
}
)
.then(function(data) {
const token = data.data.data.token;
self.getList(token);
})
.catch(function(error) {
console.log("Error", error);
});
},
getList(token) {
axios
.get(GET_LIST_API, {
headers: {
Authorization: "Bearer " + token
}
})
.then(function(data) {
const list = data.data.data;
console.log(list); // [{name: "user1"}, {name: "user2"}]
self.phonelist = list;
console.log(self.phonelist);
})
.catch(function(error) {
console.log("Error", error);
});
}
},
mounted() {
this.auth();
}
};
显示数据以console.log
正确的格式输入,但在前端数据不会改变。是phonelist
一个对象数组。
解决方案
您正在使用self
ingetList
但尚未在该方法中声明它。
推荐阅读
- linux - 由于 Ubuntu 中缺少 .env 文件,Android 应用程序无法在模拟器中安装
- reactjs - 到达路由器 - 使用 URL 加载组件
- node.js - Celebrate/Joi 在错误的情况下返回 HTML 而不是 JSON
- date - 使用两个输入字段创建具有计算机属性(getter 和 setter)的 Date 对象 Ember JS
- c# - 如果计数器未达到索引的最后一个,则防止 for 循环打印出重复的内容
- data-structures - 另一个数组中起始位置的名称
- ros - ROS项目中mini-httpd出现这个错误的原因是什么?
- angular - Angular ngrx 存储数据库更改的更新
- python - 如何将多个列表显示为一个表格,每个列表具有不同的索引长度
- python - 如何将 wav 音频文件格式(样本宽度)转换为 8 位格式?