Display HTML content with reactive variables: x-data, click and x-show 4 in Alpine JS

What we're going to do in this video is exactly the same exercise we did before I put it here quickly, it was to test that everything worked Okay, since here it doesn't give me any good message then it seems important to me to close this in the correct way but I'm going to want to do this from scratch so if you understood the exercise from the previous class perfectly you can skip this video since again we're not going to vary much just watch the last few seconds of it Okay, that being clear, let's go there so what is the first thing we have to do when working with alpine as I was telling you everything starts with an x ​​here instead of placing the v of Vue:

x-if
v-if

We will always place an x, well not an Alpin one, but well that's how the syntax works, an x ​​and a y. Here it would be the directive that you want to use. In this case, it is Data, which, as I was saying, allows us to define a data block. In this case, it is defined by an object, a javascript object, as you can see here, we define variables. So in this case, an open call:

<div x-data="{ open:false }">
    <button x-on:click="open=!open">Dame un click</button>
    <div x-show="open">
        Oculto por defecto
    </div>
</div>

In the previous example it is to show something on demand in a reactive way, that is, automatically when changing the value of open, the content is displayed.

So that's what I'm placing here Well finally here we are not doing much here it would be the part of the component itself which is what you are going to do here show hide whatever then this is where the client also comes in since in most cases the components are for the user to interact with it therefore we have several ways as you can see the official documentation but the well-known clit cannot be missing which is when we hit a click on something then here we do something because here we place an ara and we do not place a syntax like this well because this is a bl this is a directive and this is being an event this is the fundamental difference as it happens in vue and similar again this is an event understand that the purpose of an event is when an event occurs excuse the redundancy a click event an event instead of the text:

<div x-data="{ text:'' }">
   <input type="text" x-model="text"/>
   <p x-text="text"></p>
</div>

That is to say that you are writing or you stopped writing etc. a custom event we execute something while this is a statement, that is to say this is executed based on what the client decides when the client does something and this is executed automatically when the page loads, then we have a syntax there that is a little different, for the rest here this can be a method and so on but we are not going to complicate things, it is a minimal example and in this case we do something in this case just as you can see in the official documentation we put this in true which means that well it has already changed its value here I put Anything click and finally what do we do with that with this variable then in this case it is to show a content we put a spam and here we put the content that we want to Show we put content So how do we use the variable above there are many ways but it is usually used based on conditions or conditionals here in the pin we have two just like what happens with View the show that as I indicated before renders this html element but hides it through a display no and the If that simply does not render it So we are going to go first with the X show and does not complete and here we simply put the expression equal What happens with conditionals is that since this is a bullshit, there is no need to indicate that this is equal to true, although you can leave it if you want, but that is already predefined by default, so here we have it.

Alpine Operation

Note that when you load the page as Alpine is loading it is fetching it, so to speak, the Internet has to make the query, obviously if you don't load this, this below is simply custom attributes that you are not doing anything about, so it would be loaded this way, whereas when Alpine is already loading it means that since Alpine is going to start searching, so to speak, it is going to track the code that we are placing and it will see what it has to change at the component level. So we are going to process it as such based on the rules of the framework and based on what I am explaining to you the event and everything else since this again as who says is custom javascript so to speak customized by alpin then that is why you see here that at the beginning it loads quickly if you had it in local local it would be immediate So for the rest it works in the same way what other things can we do here another important point are the errors, that is to say here obviously we have to follow a syntax that is valid just like it happens with javascript if here for example we do not know if we place a character that obviously does not belong here it will give us some nice errors as you can see it tells us more or less where it is there you have to look for it but here it tells you that this expression is not valid and it does not know what to do with this because this is not valid then the rest is broken and that is what it is indicating to you here so you have to detect what the problem is.

Error-free syntax

But it is important that you also understand that this always has to be error-free because if not it will not work as you can see here it broke and it is not doing anything then here you have to realize what is happening for example if I remove this a little the same is not a valid expression this is not declared like this the expression of two points is when we are working with the objects then it has to have its keys there and once you leave it valid then it will work without problems for the rest the same here in the click if you put something incorrect obviously it will not take it and if you put an expression in javascript that is not valid here it will indicate it to you it will indicate that it does not know what trus or it should be well just when you click on it this is not defined it does not know what that is and obviously here the same you cannot put a v even if it provokes me because it simply will not take it you do not know what this is that is already that is a custom attribute that does not paint anything for the Pin and the same here it has to be a completely valid expression if not it will not work then they are little things that you have to have pending or present at the time of working with the pin d just like it happens with classic javascript of all life everything you are placing has to be completely valid for example here we are going to do the toggle I am going to place that it is the negation of this to change it a little and you are done and you can see that what it does is the token understand that if this is true then it is negating it would be false and if this is false it is negating it would be true then that is why it is presented in that way so well nothing we are going to leave it here and continue in the next class.

19-11-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Display HTML content with reactive variables: x-data, click and x-show 4 in Alpine JS