函数调用后不会覆盖Vuejs数据属性

Question

我试图在异步调用后覆盖我的属性的默认值并将其打印到DOM。我无法理解有什么不对。

注意：我正在使用单个文件组件。

我的main.js文件的一部分

import Vue from 'vue';
import CookieHandler from './lib/CookieHandler';
import Sessions from './lib/Sessions';

import Dashboard from './components/Dashboard.vue';

const cookieHandler = new CookieHandler();

// Render dashboard page
if (window.location.pathname === '/dashboard' && sessions.isSessionStarted() === true) {
  new Vue({
    el: '#dashboard',
    render: h => h(Dashboard)
  });
}

我的组件文件

<template>
    <div id="dashboard">
        <p>{{ name }}</p>
    </div>
</template>

<script>
import CookieHandler from '../lib/CookieHandler';
import request from 'request';

export default {
    name: 'Dashboard',
    data () {
        return {
            name: ''
        };
    },
    mounted: function () {
        this.fetchData();
    },
    methods: {
        fetchData: function () {
            const cookieHandler = new CookieHandler();

            let isLoggedIn = cookieHandler.getCookie('isLoggedIn');
            let authKey = cookieHandler.getCookie('auth');

            let options = {
                url: "<url>/service/fetch',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                form: {
                    'isLoggedIn': isLoggedIn,
                    'auth': authKey
                }
            };

            request(options, function (err, res, body) {
                if (!err && res.statusCode === 200) {
                    let response = JSON.parse(body);
                    this.name = response.data[0].name;
                }
            });
        }
    }
}
</script>

我正在安装组件之后调用该函数，因为我认为这是对该属性的正确使用（如果我错了，请在那个上更正我）。我也试图使用计算机。

调用该函数后，name属性应该被我在响应中获得的值覆盖。

我的理论是我的范围不同。如果有任何提示我如何保持数据范围的功能？ （将范围存储到全局变量？）

我试图使用Vue.set但我的问题不是它应该用于什么。

Package.json文件，如果有任何帮助。

"dependencies": {
    "request": "^2.83.0",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1",
    "watch": "^1.0.2"
  }

谢谢 ：）

编辑

解决了！

Answer 1

将您的请求方法更改为：

request(options, (err, res, body) => {
    if (!err && res.statusCode === 200) {
        let response = JSON.parse(body);
        this.name = response.data[0].name;
    } else {
      this.name = err.message
    }
});

() =>将保持当前背景的范围。目前你是name道具并不是你认为你正在编辑的那个。

注意：我已经添加了一个额外的行来设置错误的名称，如果你得到一个，因为你可能会得到和错误，因为没有看到名称更改。