如何监视vue资源HTTP获取数据更改

Question

我需要观看 vue-resource HTTP get请求。如果找到新数据，我希望推送到 v-for 循环，如果发现数据已删除我想删除而不重新渲染整个 v-for 数据。

JS

<table>
  <my-component>

HTML

我想在没有完全重新渲染整个 v-for 循环的情况下显示聊天记录。只需更新观察者确定的更改。

new Vue({
    el: '#chats',

    http: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },

    data: {
        chats: []
    },

    watch: {
        /* 
        * I need to watch the 'chats' data
        * if found new data, I want that push it
        * if found data deleted I want to remove it
        */
    },

    methods: {
        indexChats: function() {

            /* vue-resource
            * I need to watch this http get data for changes
            */
            this.$http.get('/api/chats').then((response) => {
                this.$set('chats', response.json());

            }, (response) => {
                console.log('could not fetch chats from api');
            });
        }
    },

    ready: function() {
        this.indexChats();
    }
});

Answer 1

您应该使用track-by属性并使用chats模型中的唯一标识符。当数组更新时，Vue将使用现有的呈现DOM来显示每个元素，而不是呈现新的HTML。

<li v-for="chat in chats" track-by="id">{{ chat.message }}</li>

现有的HTML将用于呈现<li>，如果它具有相同的ID。然后你只需处理数组而不用担心渲染。

您不需要watch来处理从该阵列中插入和删除元素，它本身就由Vue监视。您只需编写检查项目是否已添加或删除的逻辑，以便您可以相应地更新chats。