使用 axios 和 vuejs 在数据表中获取 json api 数据

Question

我有一个数据表，我想根据 api 传递数据，该数据使用 sequelize 中的 findAll() 返回 json..

但是在 console.log 中，当我调用 getUser 方法时，它会返回带有数据的数据。 但是当你向数据表中插入数据时：它会通知你它没有数据。

在代码中使用的示例数据表： 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>

Answer 1

我相信它不起作用的原因是因为getUser()方法已定义但未调用。

如果您将异步请求移动到created()生命周期钩子中，则该请求将在组件安装之前发出，因此该表应该可以访问数据。 https://v3.vuejs.org/api/options-lifecycle-hooks.html#created

Answer 2

我认为这真的会对你有帮助。

    <template>
        <v-card>
            <v-card-title>
                Liste du Personnel 
            </v-card-title>
            <v-card-text class="mt-3">
                <main>
                    <data-table v-bind="listing_personnel" @actionTriggered="handleAction"/>
                    <br>
                </main>
            </v-card-text>
        </v-card>
    </template>
    
    <script>
        import axios from "axios";
        import ActionButtons from "./ActionButtons"
    
        
        export default {
            data(){
                return {
                    user: [],
                    errors: []
                }
            },
            created() {
                this.getPersonnel();
            },
            methods: {
                handleAction(actionName, data) {
                    console.log(actionName, data);
                    window.alert("check out the console to see the logs");
                },
    
                async getPersonnel() {
                    try {
                        const response = await axios.get("SeletAllUsers");
                        this.user = response.data;
                    } 
                    catch (error) {
                        console.log(error);
                    }
                },
            },
    
    
            computed: {
                listing_personnel() {
                    return {
                        data: this.user,
                        actionMode: "multiple",
                        columns: [
                        { 
                            key: "user_matricule",
                            title: "Matricule"
                        },
    
                        { 
                            key: "user_lastname",
                            title: "Noms"
                        },
    
                        { 
                            key: "user_firstname",
                            title: "Prénoms"
                        },
    
                        { 
                            key: "user_contact1",
                            title: "Contact"
                        },
    
                        { 
                            key: "user_email",
                            title: "Email"
                        },
    
                        {
                            key:"actions",
                            title:"Actions",
                            component: ActionButtons,
                        },
                        ]
                    };
                }
            },
    
        };
    </script>


/* preferably put this in its main.js
axios.defaults.baseURL = 'http://localhost:8080/';*/*