javascript - 函数调用后 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>

我在安装组件后调用该函数，因为我认为这是该属性的正确用法(如果我错了，请纠正我)。我也尝试使用计算。

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

我的理论是我处于不同的范围内。如果是这样，有什么提示我如何保持数据功能的范围？ (将范围存储到全局变量？)

我试图使用 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 属性并不是您认为正在编辑的属性。

注意:如果您遇到错误，我添加了一行额外的行来将名称设置为错误，因为您可能会遇到错误，并且因此看不到名称更改。