Question

我对Vue相当陌生，所以我不确定是否愚蠢。

我有一个需要定期更新的表，到目前为止，我已经使用AJAX来调用API并返回数据并且一切都很好。我可以根据需要显示我的所有数据，我面临的问题，这是我的知识变得模糊的地方，就是在每次AJAX调用时我的整个表似乎都被重新渲染，I想，或者更确切地说，希望，Vue只会'＃34;取代＆＃34;已经改变的数据不是整个表格。

这样的事情可能还是我要求太多了？

我已经将我的代码包括在内，因为我做错了。

App.vue

<template lang="pug">
    .user-agent-overview
        .container
            av-table(:columns="columns" :agentData="agentData") 
</template>

<script>
    import axios from 'axios';

    import avTable from './Table';

    export default {
        data() {
            return {
                agentData: null,
                columns: [
                    'Agent Name',
                    'Status',
                    'First Log in',
                    'Last Log out',
                    'Total On duty',
                    'Total Inbound',
                    'Total Outbound',
                    'Average Talk time',
                    'Total Talk time',
                ],
            };
        },
        created() {
            this.fetchAgentData();
        },
        methods: {
            fetchAgentData() {
                this.error = null;
                this.agentData = null;
                this.loading = true;

                axios
                    .get('/api/v1/ajax-dashboard-aircall/agents')
                    .then(response => {
                        this.agentData = response.data.user_agents;
                    })
                    .catch(error => {
                    });
            },
        },
        components: {
            avTable,
        },
        mounted() {
            // this.$nextTick(() => {
            //  setInterval(function() {
            //      this.fetchAgentData();
            //  }.bind(this), 5000);
           // });
        },
    };
 </script>

Table.vue

<template lang="pug">
    table.table
        thead
            tr
                th(v-for="column in columns") {{ column }}
        tbody
            tr(v-for="(data, dIndex) in agentData" :key="dIndex")
                td(v-for="(item, iIndex) in data" :key="`${iIndex}-${iIndex}`") {{ item }}
</template>

<script>
    import axios from 'axios';

    export default {
        props: ['columns', 'agentData'],
    };
</script>

谢谢大卫

表更新和AJAX调用

0 个答案: