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而不是现在的数据

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

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

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

在Vue表中填充Firebase数据

1 个答案: