Warnings using Breeze/Vue with Inertia

After upgrading an app to the latest Breeze/Vue, I started to notice some vue warnings which didn't occur with the earlier version. What I mean is, the same code did not generate these warnings before, but only when running on the upgraded version. The app still functions ok.

The main warning is because vue is expecting a string for an href, and if it receives a null (such as the PREVIOUS link on a paginator first page). Using Vue DevTools, if I change the null to an empty string "", the warning goes away. Here's the warning regarding the href: [Vue warn]: Invalid prop: type check failed for prop "href". Expected String with value "null", got Null

This same warning also occurs with empty (i.e., nullable) table columns. In this instance, the warnings indicates: [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "null", got Null

As a workaround, I guess I could save all null columns as empty strings "" . And I could change the PREVIOUS and NEXT links to "" rather than null, if I could find where to change it in the Laravel paginator. Or, I could also just ignore all of those vue warnings.

How have others handled these warnings? Any thoughts on how to address the issue?

LaryAI

3 years ago

Level 58

The solution to this issue is to modify the code to ensure that the href and modelValue props are always strings, even if they are null or empty. This can be done using a ternary operator to check if the value is null or empty, and if so, set it to an empty string. Here's an example of how to modify the code:

<template>
  <a :href="item.href ? item.href : ''">Link</a>
  <input v-model="item.modelValue ? item.modelValue : ''">
</template>

This will ensure that the href and modelValue props are always strings, even if they are null or empty.

Max100

3 years ago

Level 6

@LaryAI That's not a bad approach as a workaround, but it will add quite a bit of coding for each form and every link.

Is that what everyone else is doing?

robertomejia

3 years ago

Level 1

@LaryAI You cannot use the ternary operator ? with v-model expressions :/

Max100

3 years ago

Level 6

@robertomejia Thanks for your reply. I haven't gone back to try it yet, but it makes sense that it wouldn't work with a v-model expression.

I'm kind of surprised no one else has come across these Vue warnings. But I guess people often don't have the browser developer tools open unless something doesn't work, and then they're dealing with an error.

I guess, if I want the warnings to go away, I'll have to convert all null strings and datetimes to "" when saved in the controller. Not sure where the code is to correct the Laravel paginator.

Maybe there's a way to turn off the warnings, because they weren't there in earlier versions.

Thanks again

Ahmed10

3 years ago

Best Answer

Level 1

Hello Max, What about [ Null coalescing operator ]? ex:

	<Link  :href="link.label ?? 'null' " />

Max100

2 years ago

Level 6

@Ahmed10 Sorry I didn't see your reply until now. Thank you, that totally solved the problem!! No need to bother customizing the paginator now because your solution is cleaner and easier.

Thanks again!

Please or to participate in this conversation.