Vue.js - After value changes in Database in Vue the value isn't updated or disappears

Question

I have a Vue Component in .NET Core MVC where I do an Ajax call to get the info to use it in the Vue Component to show information. I tried it out and it was doing great, the problem is when I update the value of the Database, let's say the initial value is 200 if I update to 500, the value just disappears or doesn't update in the Vue Component, but I know that the value is being returned correctly because I've placed some console.logs to show me the output of the value.

Vue component:

<template>
    <div class="framed">
        <div class="column-group gutters">
            <div class="all-100">
                <p>Money: <strong>{{balance2}}</strong> </p>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: "credit-recharge-component",
        data() {
            return {
                balance2: ''
            }
        },
        created() {
            this.created()
        },
        methods: {
            created: function () {
                let cobject = this;
                $.ajax({
                    url: '/Mout/GetBalance',
                    type: 'GET',
                    contentType: 'application/json',
                    success: function (data) {
                        cobject.balance2 = data;
                        console.log(data)
                    },
                    error: function (error) {
                        console.log(JSON.stringify(error));
                    }
                });
            }
        }
    };
</script>

This is my razor view:

<div id="credit">
    <credit-recharge-component></credit-recharge-component>
</div>

@section scripts{
    <script src="@Url.Content("~/bundle/Main.js")"></script>

}

So to resume, if I change the value in the Database, the value in {{balance2}} will not update or will disappear.

Takachi · Accepted Answer · 2021-02-05 12:30:00Z

1

First, I prefer using anonymous function, then you don't have to create a variable for "this" and can directly use "this" in the function.

Can you try this code ? I think there's a problem because your two functions had the same name.

<script>
    import $ from 'jquery';

    export default {
        name: "credit-recharge-component",
        data() {
            return {
                balance2: ''
            }
        },
        created() {
            this.onCreate()
        },
        methods: {
            onCreate: function () {
                $.ajax({
                    url: '/Mout/GetBalance',
                    type: 'GET',
                    contentType: 'application/json',
                    success: (data) => {
                        this.balance2 = data;
                        console.log(data)
                    },
                    error: (error) => {
                        console.log(JSON.stringify(error));
                    }
                });
            }
        }
    };
</script>

answered Feb 5, 2021 at 12:30

Takachi

7514 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mingo Bille Over a year ago

Amazing, it did work! But sometimes the value still disappears or doesn't update, but when I go in incognito it changes everytime! I honestly don't know what makes it do that sometimes but It's fixed!

Takachi Over a year ago

Can you try adding "async" before "function" ? onCreate: async function () { and then add "await" before "$.ajax" : await $.ajax({ and tell me if it's working. :)

Yves Cavalcanti · Accepted Answer · 2021-02-05 12:44:51Z

0

I believe the problem is the "this" in success function, maybe is not the vue instance. I would try change this arrow function to regular function or to create auxiliar variable.

onCreate: function () {
            var self = this;
            $.ajax({
                url: '/Mout/GetBalance',
                type: 'GET',
                contentType: 'application/json',
                success: (data) => {
                    console.log(self.balance2);
                    self.balance2 = data;
                    console.log(data)
                },
                error: (error) => {
                    console.log(JSON.stringify(error));
                }
            });
        }

I would log the value in self.balance2 to make sure i had the right "this".

answered Feb 5, 2021 at 12:44

Yves Cavalcanti

3392 silver badges6 bronze badges

2 Comments

Takachi Over a year ago

If you use anonymous function like (data) => {}, then you don't have to create a variable called self and can simply use this in the success function.

Yves Cavalcanti Over a year ago

You're are right Takachi, but i had the same trouble once and found in the docs this recomendation to avoid arrows functions in callbacks functions. vuejs.org/v2/guide/instance.html is written befire lyfecicle diagram section.

Collectives™ on Stack Overflow

Vue.js - After value changes in Database in Vue the value isn't updated or disappears

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related