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.
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.
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.
Search and Add forms:
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.
Next to that I placed a button, which when clicked opens up a modal as shown in image above.
W3CSS Modal in vue.js
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
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
For showing all the posts I use a card view
w3-card, and used a vue directive,
v-forto loop all the posts.
The VUE part
All the Vue(js) part is written in
app.js file in
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
showModal flag for showing and hiding the modal, modal is shown only when this variable is
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.
Next, I will use 2 methods to get all the items from database(getItems) and another method to add an item to database(addItem).
getItems Vue method:
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
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
addItems Vue method
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.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.