CODEWITHSUNDEEP
javascriptfunctionasynchronousvue.jscall
n0body7331
n0body7331

Reputation: 51

Vuejs data properties not overwritten after function call

I'm trying to overwrite the default value of my property after an async call and print it out to the DOM. I can't understand what is wrong.

Note: I'm using single file components.

Part of my main.js file

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)
  });
}

My component file

<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>

I'm calling the function after the component is mounted as I think this is the correct use of that property (Please correct me on that one if I'm wrong). I was trying to use computed as well.

After the function is called the name property should get overwritten by the value I get in the response.

My theory is that I'm in different scope. If so any tips how I can keep the scope of data function? (Store the scope to a global variable?)

I was trying to use Vue.set but my problem is not what it should be used for.

Package.json file if it's going to help in anything.

"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"
  }

Thanks :)

EDIT

Solved!

Upvotes: 0

Views: 777

Answers (1)

webnoob
webnoob

Reputation: 15934

Change your request methods to this:

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
    }
});

() => will keep the scope of the current context. Currently you're name prop isn't the one you think you're editing.

Note: I've added an extra line to set the name to the error if you're getting one as you could be getting and error and not seeing name change because of that.

Upvotes: 1

Related Questions