In this lecture, we will look into v4. So for loops in templates, so it's really a fun topic and really easy to understand. So what we'll do is we'll create a new dummy component, we just named it WW and that is dummy component will have a header that says, hey, component All right. Nothing very creative. So in the script tag will import the component will say import dummy from slash. And we're going to register it under the components property say dummy now is a dummy am a component right?
Or if they have a dummy component, anything. So for example, I want this dummy component to be rendered 10 times. So what I can do is I can copy pasted Several times and save it and have it render like this. Or one more method, what I can do is I can create a for loop. I can say V for component in 10. So if I save it, it renders 10 times.
So basically what what's happening is we can have this number dynamic also. So what we'll do is we'll create a data property that says number that's going to be empty for now. And we'll take our input that placeholder into the number and we're going to be model ID number. All right. So what we can do is inside the V for syntax, component in number, so what's happening is it iterates and renders a dummy component as many times as the database Do number. So for example, if we have 10, here it will, there will be 10 different types of dummy components.
So if I save it, we have our enter the number input variable. Now if I say one, we'll get one. But one thing to notice, when I say zero, we're getting two. And if I say another zero, we're getting three. So basically, we are not getting hundred hundred components, but we are getting three different components. What the reason why this is happening is the value is being stored as a string, right?
So the dummy component is being rendered as many times as there are characters in the string, right? So if I have multiple characters, I'll get multiple different components. So but what if I don't want that? What if I want it to be a number? What we can do is either we can convert it into a number by using a watch property. Using a watch property, we can say number and we can replace this DOT number using number and distort Number.
So if I say this, I can say 10 to get 10. And if I say 100 will get hundred. Another way of doing this is by adding a small attribute to the V model, we can remove the watch. And we can go to V model and we can say DOT number. So if I say DOT number, it will accept only numbers, or it'll convert the data property into a number, right? So if I say 10, now, I'm getting the 10.
And if I say 100, we get the hundred and if I say thousand, we get 1000. All right. So you can see that Visual Studio code is showing me that there is an error for this particular line. So the reason is, it's looking for an index. So usually, for components in the for loop, we need an index to kind of like identify where they're from. So to have an index, we can say components combo index, and we can declare a key as index.
So I say this. My dad is gone. And my components are working fine. All right. All right, as we learned in the previous lecture, we can send in props to different components, right? So for example, let's say the dummy component accepts props as a number, or a digit prop.
The type is number. And is it required? Yes, it's required. So if I save it, and I replace the, hey, I'm a dummy component. And as I add my indexes, digit, all right, so if I say this and inside it, I can send him the value or dummy component using digit equal to index. So if I do this, and if I save it, we can also change it by adding a plus plus four index and if I say four again, 1234 All right.
So that's it for this one. I'll see you in the next one.