Javascript Vue.js-在Vue中的数据库中更改值后，该值为'；t更新或消失

我在.NET Core MVC中有一个Vue组件，我在其中调用Ajax以获取信息，并在Vue组件中使用它来显示信息。 我试过了，效果很好，问题是当我更新数据库的值时，假设初始值是200，如果我更新到500，该值就会消失或在Vue组件中不更新，但我知道返回的值是正确的，因为我放置了一些console.log来显示该值的输出

Vue组件：

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

货币：{{balance2}

从“jquery”导入美元；
导出默认值{
名称：“信用充值组件”，
数据（）{
返回{
余额2:“”
}
},
创建（）{
这个.created（）
},
方法：{
已创建：函数（）{
让cobject=这个；
$.ajax({
url:“/Mout/GetBalance”，
键入：“GET”，
contentType:'应用程序/json'，
成功：功能（数据）{
cobject.balance2=数据；
console.log（数据）
},
错误：函数（错误）{
log（JSON.stringify（error））；
}
});
}
}
};

这是我的观点：

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

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

}

@节脚本{
}

---

因此，要继续，如果我更改数据库中的值，

{{balance2}}

中的值将不会更新或消失。

首先，我更喜欢使用匿名函数，然后您不必为“this”创建变量，可以在函数中直接使用“this”

你能试试这个代码吗？我认为这是一个问题，因为您的两个函数具有相同的名称

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

从“jquery”导入美元；
导出默认值{
名称：“信用充值组件”，
数据（）{
返回{
余额2:“”
}
},
创建（）{
this.onCreate（）
},
方法：{
onCreate:function（）{
$.ajax({
url:“/Mout/GetBalance”，
键入：“GET”，
contentType:'应用程序/json'，
成功：（数据）=>{
此值为1.balance2=数据；
console.log（数据）
},
错误：（错误）=>{
log（JSON.stringify（error））；
}
});
}
}
};

我认为问题在于成功函数中的“this”，可能不是vue实例。我会尝试将此箭头函数更改为常规函数或创建辅助变量

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

---

我会将该值记录在self.balance2中，以确保我的“this”是正确的。

太棒了，它确实有效！但有时该值仍然消失或不更新，但当我隐姓埋名时，它每次都会改变！老实说，我不知道是什么让它有时这样做，但它是固定的！你能试着在“函数”之前加上“异步”吗

onCreate:async函数（）{

然后在“$.ajax”之前添加“await”：

await$.ajax（{

并告诉我它是否工作：：）如果使用像

（数据）=>{}这样的匿名函数

，那么你就不必创建一个名为self的变量，只需在success函数中使用

这个

。你是对的，Takachi，但我曾经遇到过同样的问题，我在文档中发现了这个建议，以避免回调函数中的arrows函数。写在fire lyfecicle diagram部分之前。