Looks like regression to .prop modifier with components in 2.3.0

[davidhewitt]

Version

2.3.4

Reproduction link

https://jsfiddle.net/cpfrydsh/6/

Steps to reproduce

Create a component.

Pass it some props using v-bind, and add the .prop modifier to them.

The property values appear to not be set in the component correctly (they'll just be undefined), and bad stuff occurs.

What is expected?

In vue 2.2.6 the .prop modifier didn't do this, the only observable effect was that e.g. :foo.prop="bar" wouldn't write any html attribute if "foo" wasn't a prop for the component in question.

What is actually happening?

In vue 2.3.0 the prop bound with the .prop modifier is "undefined" when accessing in the component.

---

I had a go at reading the docs but I couldn't find any concrete definition of how v-bind:foo.prop should interplay with components.

In vue 2.2.6 I used this because .prop would guarantee no HTML would be generated. It would be nice if either the 2.2.6 behaviour was restored or there was another modifier created to say "if this component doensn't have a prop called foo, then just ignore this binding".

e.g.

<!-- components passed as my_switchable_component don't have to take
     a "foo" prop, and if they don't, I don't want the value of "foo"
     written into the HTML -->

<component :is="my_switchable_component" :foo.prop="my_foo_value">
</component>

[jkzing]

If I'm understanding correctly. You are trying to use .prop modifier as dynamic prop binding, which means you want to bind the property to the component if it has been defined and omit it if it does not.

But as far as I know, .prop modifier is designed to bind property to DOM instance. I suppose current behavior for .prop is correct.

[davidhewitt]

Ok - perhaps it was luck this worked on 2.2.6 and I shouldn't expect it to work?

Would it be worth having a note in the docs saying that using .prop modifier on a binding is incompatible with components?

Thanks
David

[posva]

As @jkzing said, the prop modifier is meant to bind Dom properties. This is documented here
I would like to know what made you think it would work in the first place, is some blog post advocating the use of prop incorrectly? In the docs the prop modifier is only on the page I sent you

[davidhewitt]

I read about .prop from the docs; but one thing wasn't clear to me from that - is the target object on which to set the property when using .prop on a component the component's vm, or vm.$el?

It wasn't clear to me what the answer was, so I decided to try out, and found that in 2.2.6 the properties are set on the component's vm.

It would seem in 2.3+ they're set on the component's vm.$el.

Perhaps something like this should go in the docs, to clear it up for future people like me:

.prop - Bind as a DOM property instead of an attribute. If the tag is a component then the component's $el will be the target object on which the property is set.

[posva]

Sure, pr to docs are welcome ☺️

…

On Tue, 20 Jun 2017, 19:52 David Hewitt, ***@***.***> wrote: I read about .prop from the docs; but one thing wasn't clear to me from that - is the target object on which to set the property when using .prop on a component the component's vm, or the component's $el? It wasn't clear to me what the answer was, so I decided to try out, and found that in 2.2.6 the properties are set on the component's vm. It would seem in 2.3+ they're set on the component's vm.$el. Perhaps something like this should go in the docs, to clear it up for future people like me: .prop - Bind as a DOM property instead of an attribute. If the tag is a component then the component's $el will be the target object to receive the property. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#5925 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAoicdroF8a_t3Qa3-FxHZHsQMdVSsc9ks5sGAbwgaJpZM4N-eOQ> .

[davidhewitt]

Thanks, see vuejs/v2.vuejs.org#966