Allow extending iterating over custom objects in v-for

[mitar]

What problem does this feature solve?

I am working on fully integrating Vue with Meteor. I managed to implement it fully, except for how Vue integrates with Minimongo, a MongoDB-compatible client-side reactive datastore. One can run MongoDB queries against a client-side database, for which you receive a cursor. Now, ideally, one could use such cursor directly in Vue.

So, I see few potential improvements here:

• Vue could allow iterating over custom objects, like Minimongo cursor; a plugin could register such custom object and a way to detect it
• Minimongo already provides some facilities to make reactivity work better, and knows how to inform consumer that documents moved in order, or which documents changed, instead of Vue having to figure out by comparing the new array of all documents with the previous array of all documents
• all documents in Minimongo have fixed known _id keys, so when using v-for on such cursor, that should be default :key used

One downside of Minimongo is that every time you request objects from it, or even cursor, you get copies of objects, referentially non-equal.

What does the proposed API look like?

While there are potentially better ways to integrate Minimongo's support for reactivity hooks, I think the simplest and more general way would be for Vue to allow:

• Registering post-processors for computed fields. In my case, a plugin would check if returned value is an instance of a cursor and then run on it Object.freeze(cursor.fetch()) to convert cursor to array and prevent Vue replacing values with getters.
• Registering a way to configure default key to iterate over. In my case, I could check that before the post-processor, that was a cursor, and set default key to iterate over to _id.

[mitar]

Now I am realizing, probably post-processor is not a good idea because it is not that v-for would be the only one using computed filed. Others could use it and expect cursor. So maybe a preprocessor for v-for would be more suitable.

[posva]

What's the difference with #5893 ?

[mitar]

This issue is asking to allow iteration over custom objects, not array-like things. Especially to be able to specify multiple other things: maybe better integrate with reactivity (so that this object could inform vue how values changed, like order modified, or one particular item in the array changed and not others), maybe allow custom conversion to array-like (or array) object for the rest of the code, and to explain which key to use to iterate.

In some way it is to help make plugins which allow developers to return any object and it will convert them to array-like (or array), instead of asking developers to pass array-like objects. It could also be seen just as sugar on top.

[posva]

Post processors is something that can be done directly inside of the computed property, so I really don't see what's the gain

Registering a way to configure default key to iterate over. In my case, I could check that before the post-processor, that was a cursor, and set default key to iterate over to _id

We prefer having explicit key setting. So that's very unlikely to happen

[mitar]

Post processors is something that can be done directly inside of the computed property, so I really don't see what's the gain

Yes, it would be mostly a sugar so that one does not have to manually convert to an array-like object every time you make a query. It is so that it is more similar to how Blaze works and people are used to.

We prefer having explicit key setting. So that's very unlikely to happen

:-(

I understand that in general any magic is tricky here. But in the case of Minimongo it is pretty clear what the key should be.

[posva]

In that case, we're going to pass because adding postprocessors to computed properties is something that you should be doing yourself and the extra api is not worth the cost. Keep in mind this can be added with a plugin that parses computed properties and add the extra post process

[mitar]

Keep in mind this can be added with a plugin that parses computed properties and add the extra post process.

That's what I wanted to hear. Any link to an example of such plugin?

[mitar]

One issue is also that I am realizing, that post-processing is maybe not the best approach. As I wrote above:

Now I am realizing, probably post-processor is not a good idea because it is not that v-for would be the only one using computed filed. Others could use it and expect cursor. So maybe a preprocessor for v-for would be more suitable.

So, is there a way to do pre-processing for v-for only?

[posva]

Not that I'm aware of, but using a mixin with a beforeInit hook that transforms the object should do it

So, is there a way to do pre-processing for v-for only?

That would be a computed property

[mitar]

That would be a computed property

Note the "only* part. Because that computed property can also be used for other purposes, not just v-for.

[posva]

we won't add something for v-for only while we already have something working for v-for & comp...