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

Hello GUYS! today I’ll be showing you what I‘v learnt so far(about manipulating lists), Actually its not something very Hard yet its very repetitive in your code … SO HERE WE GO!!

R for READ

one of the easiest thing is to show data, Our example will be easy, just list of books that you are actually reading, you click on a link to make it READ. easy?

this is our code

<div id=”app”>
<ul id=”example-2">
<li v-for=”book in books”>
<b>{{ book.name }}</b> By <i>{{ book.author }}</i>
<a v-if=”isNotComplete(book)”>DONE</a>
</li>
</ul>
</div>

isNotComplete method, only checks if a a book is read, if not show it(button) to me. otherwise hide it.

el: ‘#app’,
data: {
books: [
{ name : ‘The Majesty of Vue.js’, author : ‘Alex Kyriakidis, Kostas Maniatis and Evan You’ , completed : false },
{ name : ‘Laravel: Code Bright ‘, author : ‘Dayle Rees’ , completed : false },
{ name : ‘Laravel: From Apprentice To Artisan’, author : ‘Taylor Otwell’ , completed : false },
{ name : ‘Laravel Testing Decoded’, author : ‘JeffreyWay’ , completed : false }
]
},
methods: {
isNotComplete: function(book){
return book.completed == false
}
}

it looks easy? isn’t it.

U for UPDATE

Actually, Updating is nothing but getting an object modify it and resest it in the array by using its index.

as an example we will add a button to make the completed proprty true, meaning to read a book completly.

Our loop it will be like that

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

and in our Vue Instance? we will only add just that code

complete: function(book, index){
book.completed = true
this.books.$set(index, book)
}

Other thing, the set method could be used to add a new book to the array if you are affecting an index that it doesn’t exist yet in it. I know you already know that :D.

before to end that part, I would like to say that we could do the same by just sending the index, and looking for that book using it and work on it. just like that

complete: function(index){
var book = this.books[index]
book.completed = true
}

but it really doesn’t look good … does it?

D for DELETE

there is nothing in the world easiest than destroy things …. it needs no effort to do it. in our case only the book that we want to get RID of it. so let us add an extra button to remove the book from the list

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

and in our code, we will use the $remove method on the array object

 remove: function(book){
this.books.$remove(book)
}

C for CREATE

the creation is one of the hardest part, of it in same cases when we use the same input for the modification as well, that’s why I’d like to leave it for an other Article. when we will be doing other things.

Hope you like it and share it with your friends. Happy Coding!