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

Answer 2

您可以使用此功能从对象和数组中删除可观察到的原型。

const clone = (value) => {
  if (!value) return value;
  const isObject = (typeof value === 'object');
  const isArray = Array.isArray(value);
  if (!isObject && !isArray) return value;
  // Removing reference of Array of values
  if (isArray) return [...value.map(val => clone(val))];
  if (isObject) return { ...value };
  return value;
};

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

2 个答案: