Skip to content

v-bind="obj" seems to create a new object rather than passing the reference #7947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ghost opened this issue Apr 2, 2018 · 4 comments
Closed

Comments

@ghost
Copy link

ghost commented Apr 2, 2018

Version

2.5.16

Reproduction link

https://jsfiddle.net/742zcceg/1/

Steps to reproduce

  1. ) create a single-file component with a slot which has a v-bind="object" attribute
  2. ) consume the component via another template and set the slot-scope attribute
  3. ) within rendering, call a getter, or a function of the object. It will return undefined or the function does not exist

What is expected?

In the template code which consumes the slot, when we use the slot-scope attribute, we get a plain Object. However we need the class structure to invoke functions, access getters, etc.

What is actually happening?

We can't access the class structure of the object that was bind as we're just getting a new Object instance rather than the reference.


This is related to #4529 which lets the slot bind to an object. The thing is, I would like to invoke the functions of the object's class that was passed over. With the current situation, it is not doable as it's creating a new Object instance instead of just referencing the object which was bind to the slot.

@yyx990803
Copy link
Member

  1. Your reproduction doesn't seem to be related to the problem you are describing.

  2. v-bind="obj" not passing down original object is expected behavior, because you can use v-bind="foo" alongside other individual bindings and in those cases the final scope object needs to be merged anyway. The current behavior is more consistent. You can easily work around that by not using v-bind and instead pass it as an individual prop, and use destructuring in your slot-scope.

@ghost
Copy link
Author

ghost commented Apr 2, 2018

Hi Evan, I had actually thought of destructuring but as I was trying to do renaming of the variables as like this

"{ newVariable: oldVariable }"

as stated on the MDN, it just didn't work so I thought of posting this issue... I'll do a reproduction and create a new issue if needed be. Thanks

@yyx990803
Copy link
Member

Destructuring with alias in slot-scope works as intended. If it doesn't work you need to open a bug report with proper reproduction.

@ghost
Copy link
Author

ghost commented Apr 3, 2018

I was confused with the reproduction earlier. Post above was updated. I'll try to create another reproduction for the other issue I am facing. Thanks

@ghost ghost changed the title v-bind="obj" seems to create a new object rather than passing the reference when using Single-file components v-bind="obj" seems to create a new object rather than passing the reference Apr 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant