Vuejs2 解析承诺时设置数据属性值

在我的应用程序中，我需要使用Sequelize连接到mysql后端。下面是代码

export default {
        data () {
            return {
                username:''
            }
        },
        mounted () {
            this.dbConnect()
        },
        methods: {
            dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name');
                    console.info('current username is :' + this.username);
                })

            }
        }
    }

一切都很好，只是到那时

this.username=group.get（'name）

get解析我的UI已经呈现。是否有一种方法可以更新我的数据属性，使其在我的视图中正确更新

mounted

生命周期挂钩指的是创建了

Vue

实例，并且相应的

el

组件被替换为

vm.$el

时

如果promise的解析在可视化呈现实例之前花费的时间太长，请尝试将其设置回

created

hook上的事件。这就是我通常使用外部服务为Vue实例进行大量预处理和数据收集的地方，而且效果总是很好

所以不是

mounted() {
    this.dbConnect()
}

…在…里做

created() {
    this.dbConnect()
}

---

更新

一旦建立连接并完成承诺，您可以使用Vue实例的条件呈现来触发完全呈现

对于HTML中的外部元素，添加

<div v-if="!isProcessing">
    <!-- contents -->
</div>

几点

dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name'); // [1]
                    console.info('current username is :' + this.username);
                })

            }

在[1]处，您正在为窗口对象设置一个名为

username

的属性

您需要将函数更改为以下内容：

userGroup.findById(1).then((group) => {
    this.username =  group.get('name');
    console.info('current username is :' + this.username);
})

或者您可以设置一个变量，如

let self = this
userGroup.findById(1).then(function(group) {
    self.username =  group.get('name');
    console.info('current username is :' + self.username);
})

---

我想说的另一点是，请对异步调用使用vuex操作。

是

this.username=group.get（'name'）添加到vue实例？您正在回调中进行该修改，因此您是否可以检查
此
是否为vue实例或
窗口
？@AmreshVenugopal:很抱歉，我没有理解您的问题。用户名是一个数据属性，因此应该将其添加到Vue实例中，不是吗？如果我的理解不正确，请告诉我。thanksI的意思是，在这个
console.info（'当前用户名是：'+这个.username）之后尝试控制台
console.info（此）你看到vue实例或窗口对象了吗？@AmreshVenugopal:你是对的。这是Sequelize的一个例子。它现在对我有用。。你能把这个作为答案贴出来吗？我会这样做的。。再次感谢您，先生！请你添加javascript标签，我的回答伤害了我的眼睛，没有语法突出显示x_xthanks，谢谢你的回答。我按你的建议做了，但没用。。我很抱歉。同样的问题因此我建议使用基于
处理
（或类似的）变量的实例条件呈现，该变量为
true
，并在加载时设置为'false'。我会更新答案的，等一下。。。
let self = this
userGroup.findById(1).then(function(group) {
    self.username =  group.get('name');
    console.info('current username is :' + self.username);
})