时间戳

首页 > 解决方案 > 在 axios 之后 vuejs 没有更新

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一个对象数组。

标签： vue.jsaxios

解决方案

您正在使用selfingetList但尚未在该方法中声明它。

推荐阅读