Support .prop for DOM properties

[ycmjason]

What problem does this feature solve?

• Vue 2 feature parity

What does the proposed API look like?

<video :srcObject.prop="userMediaStream"></video>

[jonaskuske]

Attributes are always text, that's how HTML works. But if you want to pass something other than text, setting it as a DOM property instead of an attribute using :srcObject.prop="userMediaStream" should do the trick I believe. :)

[ycmjason]

Ohh sweet. Never knew about .prop 🤯

[ycmjason]

Opps, looks like it is not working yet. I will leave this open. 😄

[jonaskuske]

Hmm, it works for me.

Is your template coming from HTML/DOM instead of some build step by any chance? In that case the HTML parser will lowercase srcObject without you knowing, because attribute names in HTML are always lowercase. You can use :src-object.camel.prop="userMediaStream" instead and Vue will properly camelCase the property name for you :)

[pikax]

no problems passing the stream
https://codesandbox.io/s/confident-smoke-bvwxf

[ycmjason]

It failed when I try to set it to null. Perhaps that's a bug? If you can reproduce, I'll close those and file a new bug.

[jonaskuske]

Sneaky edit: you're right, in Vue 3 there's an error because you can't set srcObject to anything other than a MediaStream

[ycmjason]

Got the same error.

I believe the error came from https://github.com/vuejs/vue-next/blob/0bb1f67d12b4a7d7ae2fe1d94883333bf736aa13/packages/runtime-dom/src/modules/props.ts#L35

I think it is trying to set the srcObject to '' when the value is nullish.

Can't seem to find any logic around the .prop flag so I am not sure how to fix it.

Edit: It might be that Vue 3 has not deal with .prop yet?

[jonaskuske]

Yup that's it, good catch! Instead of setting srcObject to null, which is permitted, it tries setting it to an empty string – and that throws.

For now you could add a v-if="userMediaStream" to the <video> :)

[jonaskuske]

Here's a repro btw, might want to add it to the issue description:
https://codepen.io/21stCenturyJonas/pen/JjYNjZX

[ycmjason]

nice one thanks @jonaskuske

[ycmjason]

closing for #1049