For loops and conditionals in Alpine.js 11
In a demonstrative way I want to show you how you can use the for or the x-for better said together with the conditionals and also the for of objects, that is to say instead of simply iterating primitives, entire texts etc., iterate an object, the first thing is that if you want to use the x-for and also the x-if I advise you not to do it at the same level or you place it before or after, that is to say you have your x-for. Do not place the x-if here also, if to show the for you have to make some previous condition then place it before and with this you save everything, you encapsulate the entire x-for or you place it inside depending on your needs but you do not place it at the same level, that on the one hand as for the iteration of objects it is basically the same we have in this case it would no longer be a primitive as I was telling you but it would be an object as you can see then here we have it is an object and then we access its options as the case may be or is necessary and it is that simple then I do this also above all because obviously when we are working with Livewire we are going to want to apply many conditionals precisely for this type of application of everything if everything is completed then we mark for example a checkbox of completion and if it is not completed then we place another type of checkbox or a little icon that is representative and apart from that we are always iterating objects so we have that is to say we have an entity of all or whatever and we are always having a list of objects whether of categories post etcetera then I consider that
this is important for what has been said.
Cycles and conditionals
As I was telling you, either you put the x-if before in case you don't want to iterate the x-for, I don't know if the user is not authenticated, he didn't pay you, what do I do? You put it before or you put it here after based on whether or not it is completed. I want to show a text, an icon, whatever is representative of this state, so I'm going to put it here:
<div
x-data="{ todos:[ {completed:true, task:'Todo 1'}, {completed:false, task:'Todo 2'}, {completed:true, task:'Todo 3'} ] }">
<template x-for="t in todos">
<p>
<template x-if="t.completed">
<span>
Completed
</span>
</template>
<template x-if="!t.completed">
<span>
Incompleted
</span>
</template>
<span x-text="t.task"></span>
</p>
</template>
</div>
I put template here I put the X If and I put the condition in this case as it is a bullano remember that this in the end is a conditional for life then here you put equal equal to true Equal equal to false that is different from this whatever or in this case as it is a buano directly I put the evaluation of the same and around here a little the same I am going to put a spam that says complete and otherwise I am going to well put here the capital c I am going to duplicate this control shift down arrow I put denied here and this would be incomplete and this would be all around here we come back here and I don't even know what we have clear here the problem that we have that we have multiple root elements as I was telling you this is a problem so we are going to place a single root element since remember that the x-for can only have a single root element if it does not do things like the following that only shows part of the text or part of the html content that we are placing there we do this well This is to have a little space here we come here and here we have the horrible design but again I am not interested in the design I am not interested in the design and here you can evaluate it a little more This is what it is showing the first one was true This was the only false so there is the result appears complete here the whole this is the first element Here are the three this would be incomplete and here is the rest of the text and the same for the next one so this would be all for what I was telling you before using the e for with objects and also conditionals another important point is that here the xelf or the x-else If or something similar that we could use or we can use in any programming language it could be said they do not exist in the p so we always have to die with the If in the following way that is to say the logical thing would have been to do something like place x-else here and that well if this is not executed this is false then it will show this but this does not exist in the pin if you do this or something similar you will see that directly it does nothing this so that you keep it in mind So now yes with this we finish we go to the next class.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter