weixin_33722405 2018-03-26 16:35 采纳率: 0%
浏览 11

表更新和AJAX调用

I'm fairly new to Vue so I'm not sure whether being stupid or not.

I have a table that needs to be updated at a regular interval, so far I've used AJAX to make a call to an API and return the data and that all works great. I'm able to display all my data as required, the issue I'm facing, and this is where my knowledge gets fuzzy, is that on each AJAX call my entire table appears to be getting re-rendered, I thought, or rather hoped, that Vue would only "replace" the data that has changed not the whole table.

Is such a thing possible or am I asking too much?

I've included my code below incase I'm doing something wrong.

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>

Thanks David

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 电脑键盘实现触摸功能
    • ¥25 matlab无法将表达式转换为双数组怎么解决?
    • ¥15 单片机汇编语言相关程序
    • ¥20 家用射频美容仪技术规格
    • ¥15 大家帮我看看为什么错了
    • ¥15 unity互动琴弦抖动效果
    • ¥15 做了个的二极管反向饱和电流测量电路,但是测试达不到效果
    • ¥15 nginx无证书访问https失败
    • ¥15 树莓派启动AP热点传入数据
    • ¥15 multisim中关于74ls192n和DSWPK开关的问题(相关搜索:计数器)