在Vue中替换对可观察数组的引用

Question

我试图通过赋值将其数据与我的viewmodels分离开来。我想更换阵列并更新DOM，如下例所示：

demo.items = demo.items.filter(function (item) { 
    return item.childMsg.match(/Hello/) 
}) 

但是，这不起作用。使用.push和.$remove进行更新确实有效。

var services = []; 

socket.messages.on('serviceUp', function (service) { 
    localforage.getItem(service.name, function (err, local_service) { 
    service = _.extend(local_service || {}, service); // Attach properties from localstorage 
    services.push(service); 
    }); 
}); 


socket.messages.on('serviceDown', function (service) { 
    var index = _.findWhere(services, { name: service.name }); 
    services.$remove(index); 
    // services = _.reject(services, function (item) { // This doesn't work - why? 
    // return item.name === service.name; 
    // }); 
}); 


Vue.component('service-columns', { 
    template: '#service-columns', 
    data: { 
    services: services 
    }, 
    computed: { 
    columns: { 
     $get: function() { 
     return columnize(this.services, 3); 
     } 
    } 
    } 
}); 

Answer 1

的工作的jsfiddle可能会有所帮助在这里，但我猜，你可以解决它通过使用：

demo.$set("items", demo.items.filter(function (item) { return item.childMsg.match(/Hello/) })