In order to have maximum control over what the value for your props look like and the payloads for your custom events look like, you can provide validators for each of them. Let's start by demonstrating how to do that for the props. Okay, so I'll add a new key here called validator, and the validator function is going to accept the value that is passed in for the prop. Then you can simply return true or false based on the value of the prop.
True means everything is good. It is a valid prop. False means it's not a valid prop. Let's pretend then that I want all of my coffee plans to start with the word the.
startsWith the. And if it does, then this is valid. This is true. Otherwise, it is false.
and we can return this whole thing this could be shortened even further though because this is a truthy or faulty statement as it is so basically this is the true side of the ternary so whenever this is true this occurs whenever this is false this occurs so we can just remove the ternary all together so in this case the function will return false whenever the value does not start with the let's try that out now by removing one of the the words here on the coffee plants. For the hacker, we'll do that. And then when I inspect now, you can see in my console that I do have an invalid prop. The custom validator check failed for prop name, and this is on the hacker coffee plant.
I'll stick that back in there, refresh the page, inspect again, and now everything is good to go. Let's take a look at the custom validation now for the custom event. Here I've defined all of my emits as an array. If you want to provide validation, you have to define it as an object instead and then have the event names as the keys.
So we'll have selected here, which is now a function that receives the value of the payload. Just like with the props, we simply return true or false depending on whether the thing is valid or not. So here, let's just ensure that our payload that we're sending up is indeed a string. So I'll return type of payload equals string.
In order to see it in action, I will change the emit here to a boolean, refresh the page, open up the browser console, and when I click on one of the coffee plans, the event is submitted. and we get this warning in the console. Invalid event arguments, event validation failed for event selected. Perfect.
Turn this back to a string, clear out the console, click it again, and the warning is gone. If you wanted to emit multiple events, which is totally valid, a component can emit as many events as it would like, but maybe one of them you don't want the validation on. Well, in that case, Let's do hi there which is our event from earlier. You would just pass null instead of a function.
This is an event that doesn't have a validator on it. In order to have maximum control over what the value for your props look like and the payloads for your custom events look like, you can provide validators for each of them. Let's start by demonstrating how to do that for the props. Okay, so I'll add a new key here called validator, and the validator function is going to accept the value that is passed in for the prop.
Then you can simply return true or false based on the value of the prop. True means everything is good. It is a valid prop. False means it's not a valid prop.
Let's pretend then that I want all of my coffee plans to start with the word the. startsWith the. And if it does, then this is valid. This is true.
Otherwise, it is false. and we can return this whole thing this could be shortened even further though because this is a truthy or faulty statement as it is so basically this is the true side of the ternary so whenever this is true this occurs whenever this is false this occurs so we can just remove the ternary all together so in this case the function will return false whenever the value does not start with the let's try that out now by removing one of the the words here on the coffee plants. For the hacker, we'll do that. And then when I inspect now, you can see in my console that I do have an invalid prop.
The custom validator check failed for prop name, and this is on the hacker coffee plant. I'll stick that back in there, refresh the page, inspect again, and now everything is good to go. Let's take a look at the custom validation now for the custom event. Here I've defined all of my emits as an array.
If you want to provide validation, you have to define it as an object instead and then have the event names as the keys. So we'll have selected here, which is now a function that receives the value of the payload. Just like with the props, we simply return true or false depending on whether the thing is valid or not. So here, let's just ensure that our payload that we're sending up is indeed a string.
So I'll return type of payload equals string. In order to see it in action, I will change the emit here to a boolean, refresh the page, open up the browser console, and when I click on one of the coffee plans, the event is submitted. and we get this warning in the console. Invalid event arguments, event validation failed for event selected.
Perfect. Turn this back to a string, clear out the console, click it again, and the warning is gone. If you wanted to emit multiple events, which is totally valid, a component can emit as many events as it would like, but maybe one of them you don't want the validation on. Well, in that case, Let's do hi there which is our event from earlier.
You would just pass null instead of a function. This is an event that doesn't have a validator on it.