Hello everyone, welcome back to justlaravel.com. Here I am going to explore some more about vuejs, in previous post, I gave some intro to vue, where we already had database connection and operations on those data and all that cool stuff. Here I will develop another simple app to see more about Vuejs.
Working Demo Project on Github
This is a simple application something like post’s gallery where different post along with its image and its link is shown and when clicked it goes to the post.
VueJs in Laravel: Search, filter, components – justlaravel.com
So it has a simple form, where it has 3 fields, title, its link and its image when added these will store in database and the results are shown in the view.
VueJs in Laravel: Search, filter,components – justlaravel.com
I used a simple input field for typing some text, with a label which says Search Title:
In the above snippet, the most important part is the vue directive, v-model=”keyword”, I later use this directive later to search through all the posts with the keyword provided in the input field.
Working Demo Project on Github
Next to that I placed a button, which when clicked opens up a modal as shown in image above.
Here I used a modal with a form, which has 3 fields as shown in the image before.
The above code for modal is similar as any modal you write, but here the 2 noticeable things are vue’s if directive v-if=”showModal” and vue’s click method @click.prevent=”addItem().
I want to show this modal only when showModal is set to true, I will change this value later in the js part, and when button is clicked I will call a vue method addItem().
For showing all the posts I use a card view w3-card, and used a vue directive, v-forto loop all the posts.
All the Vue(js) part is written in app.js file in /resources/assets/js directory.
First I will create a new vue instance, and all the vue part in handled in an element with id app i.e all the HTML content is wrapped in a div with id app.
Create a new vue instance
First I will initialize some properties in data object.
showModal flag for showing and hiding the modal, modal is shown only when this variable is true.
keyword stores the text we enter in the search box, initially it is empty, later I use this variable to perform search operation.
newItem stores the items a new item(here a post) like its title, post link, and its image.
postList is an array which contains all the posts, initially it is empty.
Working Demo Project on Github
Next, I will use 2 methods to get all the items from database(getItems) and another method to add an item to database(addItem).
In order to make HTTP calls, we use axios (a promise-based HTTP client) from Vue 2 onwards. So I use the same here.
Here I call route /vueitems with get http verb, the laravel function for it is as follows.
the above lines of code simply fetches all the data from the database and returns it. This data is handled in Vue by adding this data to postList array which I defined earlier.
the above line adds the response to the postList array.
Next is addItems Vue method.
Here is a post request to /vueitems is called, with an extra parameter input, which contains the form data. As I discussed earlier, for each of the field in the form there is an associated Vue model with it. v-model=”newItem.title”,v-model=”newItem.link”,v-model=”newItem.image”, these gets the form data and it can be passed to laravel controller which stores them in the database.
Next, I also used mounted method, which will call when the js first loads. As I want to show all the posts, I will call getItems method in the mounted, so all the post show when the page loads.
As our app has a search feature, where a search box in shown earlier.
here Vue directive v-model does the binding and trick for us. I used Vue’s computed property to return the data of the post when its title is entered in the search box.
and in the view, I loop all the items in the filtered list to display all the posts.
Working Demo Project on Github
