mergeProps use "for in" loop !

[ppierre]

Hello,
mergeProps use a "for in" loop. So if you use an object with a prototype (class instance), you have to "clean" it first.

Exemple : pb: pocketBase return Record instance with $load method.
[pocketbase/js-sdk#181]
This code VueJS template code, events is obtained by pb.collection("events").getFullList():

<Card
      v-for="event in events"
      v-bind="
         // Won't work.
         event"
      :key="event.id"
    />

Give this error :
runtime-core.esm-bundler.js:573 DOMException: Failed to execute 'setAttribute' on 'Element': '$load' is not a valid attribute name.

I can get around by cloning the object :

<Card
      v-for="event in events"
      v-bind="
         // OK with clone.
        Object.assign({}, event)"
      :key="event.id"
    />

What is wrong ?

• Should PocketBase return plain object ?
• Should VueJS avoid using "for in" (at least on object) ?
• Should I clone all value retuned by an API ?

Should I make a VueJS issue ?

[edison1105]

it works fine, see demo. event should be a plain object.

[ppierre]

Well, it even works with a Class instance, my bad. See example.

I don't understand the only differences between this example and my code are

• The $load method is a parent class (PocketBase code).
• My <script setup> is async with Suspense.

Does or does not VueJS use "for in" on an object passed to v-bind directive ?

[ppierre]

PocketBase author made a playground with is code and it work.

But my code doesn't work ! It is a standard VueJS Project with ViteJS.

The error is really explicit VueJS iterate over object property with a "for in" so it uses $loadmethod identifier from the prototype. $load isn't a legal attribute name ; ergo the error:

runtime-core.esm-bundler.js:573 DOMException: 
Failed to execute 'setAttribute' on 'Element': 
** '$load' is not a valid attribute name. **

Should VueJS iterate over prototype properties ("for in" ? But I haven't traced it with the debugger.).

EDIT: minimalist repro of a vite app who show the bug

[ppierre]

I tried to replicate the "bug" in the playground by adding Suspense:

• With a dummy Class Record.
• With the Record of PocketBase.

Both work 👍
But not my code... 👎
The version with PocketBase show some warning (it seems to iterate on the prototype properties), but not my error...

Can a setting turn warning of undeclared properties in an error ? And only for a name who is not a valid attribute name ?

Rappel:

runtime-core.esm-bundler.js:573 DOMException: 
Failed to execute 'setAttribute' on 'Element': 
** '$load' is not a valid attribute name. **

[ppierre]

The bug is visible with ViteJS, not in Playground.

minimalist repro of a vite app who show the bug

[ppierre]

I have trimmed down the error to be visible with ViteJS and only with Pocktbase:

• The main branch with PocketBase : '$load' is not a valid attribute name.
• This branch with a dummy Record Class: no error !!!

[edison1105]

It's unrelated to Vuejs. el.setAttribute('$type', val) will get an error because the attr-name can not be prefixed with $. you should bind valid attrs and props.