在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/) })