在Vue表中填充Firebase数据

Question

我正在从这里https://github.com/matfish2/vue-tables-2使用Vue表JS

<script type="text/javascript">
Vue.use(VueTables.ClientTable);
new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'created_at'],
    data: getData(),
    options: {
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        created_at: 'Created At'
      },
      sortable: ['name', 'code'],
      filterable: ['name', 'created_at']
    }
  }
});



function getData() {
  return [
      {
    code: "ZW",
    name: "Zimbabwe",
    created_at: "2015-04-24T01:46:50.459583",
    updated_at: "2015-04-24T01:46:50.459593",
    uri: "http://api.lobbyfacts.eu/api/1/country/245",
    id: 245
  }
];
}

在上面的示例中，介绍了如何填充静态数据。

为了从Firebase填充数据，我使用了以下方法，如果我不使用表格格式，该方法将起作用。

Vue.use(VueTables.ClientTable);
new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'created_at'],
    data: {
     users: []
   },
   created () {
     userRef.on('child_added', snapshot => {

       this.messages.push({...users, id: snapshot.key})
     })
   },
    options: {
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        created_at: 'Created At'
      },
      sortable: ['name', 'code'],
      filterable: ['name', 'created_at']
    }
  }
});

如何使用Vue Table JS正确填充数据

Answer 1

假设您正在使用data.users而不是data

created () {
     userRef.on('child_added', snapshot => {

       this.data.users.push({ ...snapshot.val()})
     })
   }

因此在添加新子项时，该表将自动更新。