約束が解決したときにデータプロパティ値を設定する

Question

私のアプリでは、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); 
       }) 

      } 
     } 
    } 

すべては私のUIが既にレンダリングしている解決さ時間
this.username = group.get('name)によることを除いて、正常に動作しているコードです。データプロパティを更新して、更新されたビューを正しく表示する方法はありますか？

Answer 1

ポイントのカップル

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アクションを使用してくださいあなたの非同期呼び出し。

Answer 2

Vue Lifecycle Hooks Diagram

mountedライフサイクルフックVueインスタンスが作成され、それぞれのel成分はvm.$elで置換されている場合を指します。

インスタンスのビジュアルレンダリングの前に約束が解決しない場合は、createdフックのイベントに戻してみてください。これは、通常、外部サービスを使用してVueインスタンスの前処理やデータ収集を行う場所で、常にうまく機能します。

ので、代わりの...

mounted() { 
    this.dbConnect() 
} 

...でそれを行う...

created() { 
    this.dbConnect() 
} 

---

UPDATE

あなたの条件付きのレンダリングを使用することができます接続が完了して約束が完了したら、完全なレンダリングを開始するためのVueインスタンス。

ただ、HTMLであなたの外側の要素のために、追加...

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

とあなたのJSにわずかに加え：

export default { 
     data() { 
      return { 
       username:'', 
       isProcessing: true 
      } 
     }, 
     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((group) => { 
        this.username = group.get('name'); 
        this.isProcessing = false; 
        console.info('current username is :' + this.username); 
       }) 

      } 
     } 
    }