SQLクエリからVue.jsコンポーネントのデータを初期化する方法

Question

Electron、SQliteおよびVue.jsを使用して簡単なタグブラウザアプリケーションを作成しています。アプリケーションの起動時に、SQLテーブルのすべての行をHTMLテーブルに移入する必要があります。

ただし、Vueコンポーネントのデータを初期化できません。アプリケーションを起動すると、結果は表示されません。しかし、一度ウィンドウを更新すると、すべての結果が表示され、テーブル行が正常に作成されます。

Vue.jsコンポーネントのデータを初期化するための非同期要求（この場合はSQLiteクエリ）を取得する最も良い方法は何ですか？

これまでに（無関係なコードを削除）

model.jsたぶん、このような

module.exports.getAll = function(table, callback) { 
    const sql = `SELECT * from ${table}`; 

    dbConnect(); 
    db.all(sql, (err, rows) => { 
     callback && callback(rows); 
    }); 
    db.close(); 
} 

FileTable.vue

<template> 
... 
      <tr v-for="file in listings"> 
       <td>{{ file.filename }}</td> 
       <td>{{ file.type }}</td> 
       <td>{{ file.size }}</td> 
       <td>{{ file.path }}</td> 
      </tr> 
... 
</template> 

<script> 
    import model from '../../model.js'; 

    export default { 
     data() { 
      return { 
       listings: {} 
      } 
     }, 

     methods: { 
      initListings: function() { 
       model.getAll('files', rows => {this.listings = rows}); 
      } 
     }, 

     created() { 
      this.initListings(); 
     } 
} 
</script> 

Answer 1

私の試み：

module.exports.getAll = function (table) { 
    return new Promise((resolve, reject) => { 
    const sql = `SELECT * from ${table}` 

    dbConnect(); 
    db.all(sql, (err, rows) => { 
     db.close() 
     err ? reject(err) : resolve(rows) 
    }) 
    }) 
} 

<template> 
    ... 
    <tr v-for="file in listings"> 
    <td>{{ file.filename }}</td> 
    <td>{{ file.type }}</td> 
    <td>{{ file.size }}</td> 
    <td>{{ file.path }}</td> 
    </tr> 
    ... 
</template> 

<script> 
    import model from '../../model.js' 

    export default { 
    data() { 
     return { 
     listings: [] 
     } 
    }, 
    methods: { 
    async initListings() { 
     this.listings = await model.getAll('files') 
    } 
    }, 
    created() { 
    this.initListings() 
    } 
</script>