函数调用后未覆盖 Vuejs 数据属性答案

【问题标题】：Vuejs data properties not overwritten after function call函数调用后未覆盖 Vuejs 数据属性
【发布时间】：2017-12-24 21:37:28
【问题描述】：

我试图在异步调用后覆盖我的属性的默认值并将其打印到 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"
  }

谢谢:)

编辑

解决了！

【问题讨论】：

我认为问题在于您使用的是this.name，而this 在该范围内并不是您认为的那样。尝试在请求之前使用let self = this 创建一个变量，然后使用self.name = /* something */
@JamieMcElwain 谢谢你的工作。只是我在胡闹并试图访问错误的对象:)
不要编辑并说已解决，如果有帮助或通过其他方式解决，请勾选答案，添加您自己的答案并勾选。它可以帮助人们在网站上前进。

标签： javascript function asynchronous vue.js call

【解决方案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 道具不是你认为你正在编辑的那个。

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

【讨论】：