Including Native JavaScript in Vue
As I have told you on several occasions, here is the Academy application:
https://academy.desarrollolibre.net/
That is where I have my courses and books is completely made in Vue with Laravel obviously the traditional scheme in which we have a rapi and we have the application in View that consumes it is that simple and the entire screen is purely Vue so I want to show you something curious this is the book viewer that I already implemented here in a certain way at least a minimum acceptable then I can improve it but what it does here notice that we have the subtitles the h2 would be in this case this would be the h1 which is the one we have well I did not put it here and this would be the h2 that we have for this chapter in a few words this is a chapter of the book and here we have the as who says sub chapters or I don't know what you want to call the internal divisions to the chapter and the joke of this is that we can click on it and it takes us to the same so this is where I would ask you how you would do this if you are implementing the application in and I would like you to leave it there commented in case something interesting occurs to you or simply give the idea that you have and that's it We discuss anything so this is basically where I want to pause a little before showing you the solution here and giving you my opinion.
Vue for page manipulation
Vue is excellent for what is the manipulation of the page and with this to create a SPA type website, that is to say, through the events of the user who clicks here a little box is displayed, the animated question navigates to another side, everything else is excellent for that, for the manipulation of the DOM, you could say adding and removing elements on the screen, I think that would be a good summary of this type of technologies like Vue, but you can expect the same from Angular and what is React, but what happens with precisely how this data is presented, there things change a bit because precisely to do this navigation, I'm not saying that it can't be done in View. Surely it can. I didn't find it and it also bothered me a lot to look for a plugin or an issue there
for me to analyze it for me since it is nonsense in native llves cree, I preferred to do it through native llv, which is where we have, as they say, that small vulnerability or that small weakness in these technologies like Vue, since doing this type of operations may not be so simple, using native JavaScript directly in Vue would be very simple and how I did it.
Implementation
Look at what I implement here, this is the one in charge of doing the operation, I simply make a query selector, that is, I am moving towards an h2 since another very important point is that this content that I am placing here, I am not placing it letter by letter with Vue, this is simply an html that I have in the database and I dump it into a page using a DIV, html is what I have here:
getHxs() {
this.hxs = []
setTimeout(() => {
this.hxs = document.querySelectorAll(".post h2")
}, 500)
}So Vue has no direct reference to that content let's see where I see it control F to see I think it's above control F html Here it is This is what I'm doing is an html in the database and I simply dump it into a di in a
section whatever in the body of the page so again Vue has no direct reference at least of what we have in that content which is what I want to work on at this point So that is being a bit like who says the difficulty that we would have if we worked here directly with Vue to do this type of functionality so at this point is where we return a bit to native JS and it is a bit what I wanted to show you that we can extend Vue with native javascript without any problem since in the end they are h2 we already have the reference of the element that we want to grab therefore we can easily create a query or a Well a query selector as follows that we have here simply the page that as main element I have the post which is all this all this is my post the entire page I get all the h2 already with that I have again all the h2 and that's what I'm showing here on the screen that's another point as I don't have the direct reference to all the content that I have here I wouldn't have a way to do this so that's what I'm doing here in Vue without apart from the navigation here we're getting all the h2 and I'm saving it here in this variable called hxs:
this.hxs = document.querySelectorAll(".post h2")This is the one I use above with Vue to iterate it and place the h2 title here as the title:
<p v-for="h in hxs" :key="h" class="cursor-pointer m-0 hover:text-white"
@click="h.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">
{{ h.innerText }}
</p>I think that we use innertext here. Note that this is pure javascript, but we are using Vue to iterate an array that was built using pure javascript, that is, using the selector that I showed you before.
scrollIntoView to move the scroll to a location
And for the scroll part I have it defined here as well. I'm simply using a function, well a method I don't know what it's called, a javascript function called scroll into viw that moves from one position to another. In this case, the other position would be the one defined by this H element, that is, the H is what we have here, but in this case at the page level, since these are only references, that is, this is the reference. Note that this is not the title, it's only the selector that I'm saving
there, and therefore we can tell it through the aforementioned function to navigate to that position, and I'll leave the rest of the parameters there for you to investigate, since it's not the purpose of this video to show you how that function called scroll into viw works, but what it does is make it do it in an animated way and place the navigation at the beginning, not at the end. For example, if here I place it at the end, well, this is live in production. So no, you're not going to see the changes, but that's what it does, and this
was the little experiment that I wanted to show you in case you also have a similar problem that you can easily solve with native cis keys and you are using technologies such as those mentioned Vue angular or read that you know that you can also incorporate those small capsules to call it in some way as you are seeing through native java to implement these functionalities so without further ado we will see you in another video.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter