Vue: Class methods lost when object passed to a scoped slot

[KKSzymanowski]

Version

2.5.3

Reproduction link

https://jsfiddle.net/smyv26u2/

Steps to reproduce

Uncomment the price with VAT.

What is expected?

The second list should also display the price with VAT

What is actually happening?

There is an error in the console:

TypeError: product.priceWithVat is not a function

[KKSzymanowski]

It works using a plain JS object instead of a class: https://jsfiddle.net/7tfvoctd/

[GMaiolo]

I just took a quick look at the renderSlot function and found this:

if (scopedSlotFn) { // scoped slot
  props = props || {}
  if (bindObject) {
    ...
    ...
    props = extend(extend({}, bindObject), props)
  }
  ...
}

And the extend function:

export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

So, my best guess is that as the product instance of Product class is being merged with an object literal, all of its prototype's methods are being discarded because of the for in iterating over the _enumerable properties_ of the object, and the constructor & any defined methods are _non-enumerable properties_ of the class's prototype object.

Using an object literal instead of a class instance would be the best workaround if possible.

I haven't had the chance to check if this is what's actually happening, I'll try to come back when done so.

[yyx990803]

This is expected behavior, because scoped slot props bound via v-bind are not passed directly as an object, it's always copied as a plain object. Just imagine if you have another v-bind:foo="123" alongside the v-bind="product", foo needs to be merged with the keys found in product, and the behavior needs to be consistent in all cases.

[Moskydesign]

Wrapping your class instance in an object bypasses this problem.

[KKSzymanowski]

What do you mean? Can you give me an example?

[Moskydesign]

Instead of:

<slot v-bind="MyClassObject"></slot>

You do something like this:

let MyWrappedClassObject = {'object': MyClassObject}
<slot v-bind="MyWrappedClassObject"></slot>

<template slot-scope="MyWrappedClassObject">
  {{ MyWrappedClassObject.object.value }}
</template>

[KKSzymanowski]

That works, thanks.
You can also utilise shorthand properties and object destructuring to make it cleaner.

In component:

<slot v-bind="{product}"></slot>

In parent:

<template slot-scope="{product}">
    {{ product.priceWithVat() }}
</template>