I have a datatable and I want to pass the data according to the api that returns a json using findAll() from the sequelize..

But in console.log when I call the getUser method it returns the data with the data. But when you insert data into the datatable: it is informing you that it has no data.

Example datatable using in code: https://vuejsexamples.com/a-vue-plugin-that-adds-advanced-features-to-an-html-table/

    <template>
      <div>
        <data-table v-bind="bindings"/>
      </div>
    </template>

    <script>
    import ActionButtons from "../Components/ActionButtons"
    import axios from "axios"

    export default {
      name: 'Usuarios',
      data(){
        return {
          user: this.user,
          errors: []
        }
      },
      computed: {
            bindings() {
                return {
                  data: this.user,
                    lang: "pt-br",
                    actionMode: "single",
                    columns: [
                      {
                        key:"code",
                        title:"Código"
                      },
                      {
                        key:"name",
                        title:"Nome"
                      },
                      {
                        key:"login",
                        title:"Login"
                      },
                      {
                        key:"cpf",
                        title:"CPF"
                      },
                      {
                        key:"actions",
                        title:"Ações",
                        component: ActionButtons,
                      },
                      ],
                }
            }
        },
        methods:{
          getUser() {
                          axios
                            .get("http://localhost:3005/users")
                            .then((res) => {
                              this.user = res.data;
                            })
                            .catch((error) => {
                              console.log(error);
                            });
                    },
                }
    };
    </script>

CodePudding user response：

I believe the reason it doesn't work is because the getUser() method is defined but not called.

If you move the async request into a created() lifecycle hook, the request will be made before the component is mounted, so the table should have access to the data. https://v3.vuejs.org/api/options-lifecycle-hooks.html#created