Your GUIDE to MASTER CRUD on lists using VueJS (Part 2)

INANI El Houssain
Oct 13, 2016 · 5 min read

As I promised you in the last post, we will resume our work and make some good things, rather than the CRUD.

How many pages have you read already?

We will let the user specify how many pages he has read untill now, so we will add extra fields in the books array (totalPages, totalPagesRead).

so our array it will look like that

books: [ 
{ name : ‘The Majesty of Vue.js’, author : ‘Alex Kyriakidis, Kostas Maniatis and Evan You’ , completed : false, totalPages : 100, totalPagesRead : 0 },
{ name : ‘Laravel: Code Bright ‘, author : ‘Dayle Rees’ , completed : false, totalPages : 100, totalPagesRead : 0 },
{ name : ‘Laravel: From Apprentice To Artisan’, author : ‘Taylor Otwell’ , completed : false, totalPages : 150, totalPagesRead : 0 },
{ name : ‘Laravel Testing Decoded’, author : ‘JeffreyWay’ , completed : false, totalPages : 200, totalPagesRead : 0 }
]

at the other hand, we will give him the possibility to read more pages from that book, of course if there is still some pages to read.

<li v-for=”book in books”>
<b>{{ book.name }}</b> By <i>{{ book.author }} ({{ book.totalPagesRead }}/{{ book.totalPages }})</i>
<a v-if=”isNotComplete(book)” href=”#” @click.prevent = ‘complete(book, $index)’>DONE</a>
<a v-if=”isNotComplete(book)” href=”#” @click.prevent = ‘readPages(book, $index)’>Read some</a>
<a href=”#” @click.prevent = ‘remove(book, $index)’>DROP IT</a>
</li>

we only need to tweak our isNotComplete() and complete() methods to make us of our two new fields … just like that!

isNotComplete: function(book){
return book.completed == false && book.totalPagesRead < book.totalPages
},
complete: function(book, index){
book.completed = true
book.totalPagesRead = book.totalPages
this.books.$set(index, book)
}

and this is our famous readPages method, we don’t need to make it fancy, since its just for educational goals. read the value of how many pages you have read(reach) and then work on it. the code explaines it self.

readPages: function(book, index){
var extraPages = prompt(“Please enter your How Many Pages have you read”, book.totalPagesRead);
if(extraPages == null || extraPages<0){
alert(‘input should not be empty or negative’)
}else if(isNaN(extraPages)){
alert(‘it should be numeric’)
}else if(extraPages > book.totalPages){
alert(‘where can I find the extra pages!!?’)
}else{
book.totalPagesRead = extraPages
}
}

The first step to CREATE is to handle the case of UPDATE

Actually creating and updating an item looks the same if you are using one single page apps, and it would be easier to start from the update case. I REALLY don’t know if its the best way to do it, but this is how I tackle it.

1- create the box that will hold the value to be edited/created. just make the same fields. and an extra field where we will stock the index of the element we want to handle. and Yes!! if its creating it will be empty(you got the idea).

newBook: {
name : ‘’,
author : ‘’,
completed : false,
totalPages : ‘’,
totalPagesRead : 0
},
indexToEdit : ''

2- create the form we will be using, and of course the button will change according to the operation that we want to make.

<label>Name</label> <input type=”text” id=”name” v-model=”newBook.name” /> <br />
<label>Author</label> <input type=”text” id=”author” v-model=”newBook.author” /> <br />
<label>Pages</label> <input type=”text” id=”author” v-model=”newBook.totalPages” /> <br />
<button v-if=’updateMode()’ id=”update” @click.prevent=”update()” />Update</button>
<button v-else id=”add” @click.prevent=”add()” />add</button>

so if its on the updateMode then we will perform an update, otherwise create a new item and push it to the array.

updateMode: function(){
return this.indexToEdit !== ‘’
}

3- the button to edit, to copy the information of THAT item(book) in the form. of course we will need the index to save it as well.(we can get the book by only providing the index).

<a href=”#” @click.prevent = ‘edit(book, $index)’>EDIT IT</a>

all we will do is a simple assignement to some fields.

edit: function(book, index){
this.newBook.name = book.name
this.newBook.author = book.author
this.newBook.totalPages = book.totalPages
this.newBook.totalPagesRead = book.totalPagesRead
this.newBook.completed = book.completed
this.indexToEdit = index
}

4- before we go too far, let us prepare some helper methods, for instance to check the fields and the validity of its information(we won’t make it difficulte as well).

isReadyToBePushed: function(book){
return book.name != ‘’ && book.author != ‘’ && book.totalPages != ‘’
}

and the other will only re make the books the way they should be if there are some changes, for example change the number of total pages, that will imply changing the state and the ration (read/available).

checkBook: function(book){
book.totalPagesRead = book.totalPagesRead >= book.totalPages ? book.totalPages : book.totalPagesRead
book.completed = book.totalPagesRead == book.totalPages ? true : false
return book
}

5- and now we can perform the update, it will be simple, take what is in the form. verify if its ready to be pushed, then make the changes if so. at the end we will put it in the array and set the indexToEdit to the empty string as well as the newBook object.

update: function(){
var newBook = this.newBook
if(this.isReadyToBePushed(newBook)){
this.newBook = {
name : ‘’,
author : ‘’,
completed : false,
totalPages : ‘’,
totalPagesRead : 0
}
newBook = this.checkBook(newBook)
this.books.$set(this.indexToEdit, newBook)
this.indexToEdit = ‘’
}else{
alert(‘You should Fill all the fields!’)
}
}

Attention!! we will have to alter the remove method, we will clean the form if the removed item is the one we wanted to edit.

// just don't forget to modify it in the list as well by providing $index
remove: function(book, index){
this.books.$remove(book)
if(this.indexToEdit == index){
this.indexToEdit = ‘’
this.newBook = {
name : ‘’,
author : ‘’,
completed : false,
totalPages : ‘’,
totalPagesRead : 0
}
}
}

And now we can perform the operation of add easily.

add: function(){
var newBook = this.newBook
if(this.isReadyToBePushed(newBook)){
this.books.push(newBook)
this.newBook = {
name : ‘’,
author : ‘’,
completed : false,
totalPages : ‘’,
totalPagesRead : 0
}
}else{
alert(‘You should Fill all the fields!’)
}
}

And thats all !!!

Hope it was helpfull for you guys … hope you can help me by sharing it with your friends.

next time we will implement the same thing using Laravel as a backend and vue-resource.

INANI El Houssain

Written by

@realmadrid, @laravelphp and @vuejs's lover. #HalaMadridYNadaMas