Question

我正在使用Electron，SQlite和Vue.js编写一个简单的标记浏览器应用程序。在应用程序启动时，我需要使用SQL表中的所有行填充HTML表。

我在 Vue 组件中初始化数据时遇到了问题。当我启动应用程序时，我看不到任何结果。但是，一旦我刷新窗口，所有结果都会存在，并且表行已成功创建。

获取异步请求（在本例中为SQLite查询）以初始化 Vue.js 组件的数据的最佳方法是什么？

到目前为止我的尝试（删除了无关的代码）

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>

如何从SQL查询初始化Vue.js组件中的数据

1 个答案: