Vue-formulate: Symbol as v-for key workaround options for IE11

[mwojtul]

Hi, thanks for the great library.

I'm going with feature request instead of bug for this because it's only an issue in IE11 which I know VueFormulate doesn't officially support. Unfortunately, we still have to support it where I work, so here goes:

The setId method sets the id to a Symbol. That's fine as it's possible to polyfill the Symbol, but the issue occurs when that symbol is fed to v-for as the key, like in FormulateGrouping. The native Symbol is a primitive, but polyfills can't add new primitives, so the implementations that I've seen tend to be returning an object with something like a _uuid key used to track it. When that object gets used as the key, Vue's of course not happy:

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

Curious if you have any suggestions for how to get around this. One thought we have is creating our own components that override FormulateGrouping and FormulateInputGroup so we can control what gets used as the key, but that seems a bit heavy handed as there's a lot of logic in those.

[justin-schroeder]

Hmm. Yeah, fair points. I suppose we could just rewrite setId to use a random generated string too. Symbols are just a great "free" alternative. I'll look to make this change, thanks for the good report.

[justin-schroeder]

This is fixed in release/2.4.4