Make the warning messages more explicit

[AlexandreBonneau]

What problem does this feature solve?

When seeing warning message like [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String., it would be great if Vue could display the actual values it encountered.

For instance, immediately seeing 2 and '2' would speed up development.

What does the proposed API look like?

No API changes

[ajomadlabs]

Can I take up this issue

[posva]

Of course!

[ajomadlabs]

@posuva Since this is first contribution, Can you tell me where to start-off

[phanan]

@ajomadlabs I'd suggest searching the string for the file and go from there. In this case src/core/util/props.js.

[ajomadlabs]

@posva Should I replace the 'value' with the actual value that it encountered ? Correct me if I am wrong

[AlexandreBonneau]

@ajomadlabs the goal here is to allow the dev to see which value generated that error.
The "value" is the name of the props that failed the test.

I'm guessing the string could be something like:

warn(
      `Invalid prop: type check failed for prop "${name}".` +
      ` Expected ${expectedTypes.map(capitalize).join(', ')}` +
      `, got ${toRawType(value)} with value ${givenValue}.`,
      vm
)

...to be defined to be consistent with other Vue messages.

Also, be sure to display the 'type' of the value by adding quotes if it's a string like '2', and no quotes when it's a number like 2.

[ajomadlabs]

@AlexandreBonneau Thanks 👍

[dczombera]

Since nothing has happened for 12 days I was wondering if I could taker over this one as my first contribution? 😊

[ajomadlabs]

@dczombera I am working on it but I am getting stuck in the middle

[AlexandreBonneau]

Do you need any particular help for getting unstuck @ajomadlabs ?
This feature is highly anticipated around here :)

[ajomadlabs]

@AlexandreBonneau I think I have found it

[AlexandreBonneau]

👍