Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

Invalid prop: type check failed for prop "modelValue"

Hello,

I have a parent and a child component, the parent passes a property as a props for the child. The props can be null or undefined.

When it is null or undefined, I get this warning in the console.

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String | Number | Object, got Function

I don't understand why it says got Function. And I don't understand what I can do to not have this warning any more.

If you have any advise for me ;).

Thanks.

V

0 likes
7 replies
vincent15000's avatar

@MohamedTammam I have identified two situations for which I get this warning.

First situation (not solved yet)

I have the form and two buttons to open the form with levelId null or not null.

<level-form
	:dialogVisible="dialogLevel"
	:levelId="levelId"
	@close="closeDialogLevel()">
</level-form>

...
data() {
	return {
		levelId: Number,
		dialogLevel: false,
	}
},

...

@click="createLevel()" // click for button to create a new level 
@click="openDialogLevel(scope.row.id)" // click for button to edit an existing level in a table

...

openDialogLevel(levelId) {
	this.levelId = levelId
	this.dialogLevel = true
},
createLevel() {
	this.openDialogLevel(0)
},

And the child component with the props.

props: {
	dialogVisible: Boolean,
	levelId: Number
},

I have tried Lary AI's suggestion, it works when I add Function as a possible type for the id, but I don't think that it's a solution, because the id can only be a number or null.

Second situation (now solved)

I don't have a table but I directly open a view that contains the details for a student. In this view I need to have the student id passed by param in the URL.

<sessions-list :studentId="studentId"></sessions-list>

data() {
	return {
		studentId: Number,
		dialogStudent: false,
	}
},

mount() {
	this.studentId = parseInt(this.$route.params.id)
}

I have moved this code into a computed property and I don't get the warning any more.

computed: {
	studentId() {
		return parseInt(this.$route.params.id)
	}
},
MohamedTammam's avatar

@vincent15000 The error mentions "modelValue". I don't see it in the example you provided.

Mostly it's a prop for v-model.

1 like
vincent15000's avatar

@MohamedTammam Oh sorry I forgot it in my comment. This is a third situation when I create a custom select field in which I have a modelValue props and I bind its value from the parent via something like v-model="student.id". It works fine (except for the warning).

Please or to participate in this conversation.