Symbol-keyed properties non-reactive

[dansebcar]

Version

2.6.10

Reproduction link

https://jsfiddle.net/dansebcar/b75n0uw6/16/

Steps to reproduce

• Press update to change each item's name to "b"

What is expected?

The list re-renders with the new name

What is actually happening?

The list does not change

---

If we instead define "symbol" as any non-empty string, the expected re-render is observed, so I think the cause is just the parent list (items) is accessed through a symbol.

Nesting the symbol property an additional level (IE in config, rather than directly on data) is necessary to render the list at all; I guess symbols from data aren't directly transferred?

I noticed in the devtools when I pressed "refresh" after mutating the items that I could see the new name, so I assumed something about the way I was setting the property didn't trigger the update, but even Vue.set did not help.

[xx1124961758]

Because of the way defineproperty works, I don't know why. It should be OK to change defineproperty to proxy in vue 3.0 version.

[Tipwheal]

[xx1124961758]

@Tipwheal i made a mistake.

[Tipwheal]

I tried to add some code in the function Observer.prototype.walk to support using Symbol, it works

Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  if (Reflect.ownKeys) {
    Reflect.ownKeys(obj).filter(k => typeof(k) === 'symbol').forEach(k => keys.push(k));
  }
  for (var i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i]);
  }
};

[Tipwheal]

https://jsfiddle.net/mwrjxLg8/ Vue.set helps

[danielgindi]

https://jsfiddle.net/mwrjxLg8/ Vue.set helps

Only if set after the object has been made reactive already. If the object is not reactive yet, Vue.set will do a simple property set.

[danielgindi]

I tried to add some code in the function Observer.prototype.walk to support using Symbol, it works

Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  if (Reflect.ownKeys) {
    Reflect.ownKeys(obj).filter(k => typeof(k) === 'symbol').forEach(k => keys.push(k));
  }
  for (var i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i]);
  }
};

Or:

Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  if (Object.getOwnPropertySymbols) {
    for (let key of Object.getOwnPropertySymbols(obj))
      keys.push(key);
  }
  for (var i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i]);
  }
};