Vue에서 관측 가능한 배열에 대한 참조 교체

Question

할당을 통해 설정하여 내 데이터와 뷰 모델을 다소 분리하려고합니다. 배열을 대체하고이 예제에서와 같이 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/) })

을