v-bind with something else than an object should warn you

[jimrubenstein]

Version

2.4.4

Reproduction link

https://jsfiddle.net/57508hba/4/

Steps to reproduce

1. Create a component with a slot
2. Bind a reference to a string to the slot via v-bind
3. Utilize said component and define a template for the defined slot, giving it a local scope parameter with which to output the bound string.
4. Output the scoped string in your template which is passed to the component created in step 1

What is expected?

The string bound to the slot should be passed into the template passed for the slot, as a string.

What is actually happening?

The string is being exploded into an object where the properties are the string indexes for each character in the string.

---

I'm not sure if this is intended behavior or not. The default value for the defined slot outputs the string as expected, but as soon as it's passed to the consumer defined template, the string is altered to an object.

The temporary work-around for this is to simply pass an actual object to v-bind on the slot, and expect an object as the scoped value in your defined template.

It seems that if this is intended behavior, there should be at least a Vue warning about the value being mangled and that v-bind expects an object and not string.

[sirlancelot]

v-bind is meant to receive an Object when it doesn't have an argument. Perhaps a warning during development would help alleviate the confusion but it's already in the documentation.

[posva]

You should actually do <slot :my-value="myValue"> and then get it as theQuery.myValue (or similar)
What made you think you could directly bind a String?
(before adding a warning, which could be helpful, I want to see if there's something making users understand that they can use v-bind with something else than an object

[jimrubenstein]

@posva I'm not sure exactly where I picked it up. Probably reading code from other open source projects and replicating the behavior. I could certainly be ignorance on my part, not putting 2 and 2 together wrt v-bind and :prop syntax.

I'm pretty positive I've never read (and didn't think to reference) the v-bind api docs directly, and just picked up its general usage through looking through other examples and reading different parts of the docs.

[posva]

Ok, thanks. I changed the title

[jamOne-]

I can take this one and add the warning

[simkuns]

You can bind strings with type coercion.

<slot v-bind="{toString: () => variable}" />