Vue JS 2 computed properties: Tutorial 3

By | August 16, 2021

Hello coders!! This article series is about the Vue JS 2 computed properties: Tutorial 3.

In normal use of the structure of a regular template, we put everything at once, but that needs to be simpler. Putting all the code and logic in one place makes code more complicated to understand.

That’s why for this kind of complex logic, you should use a computed property.

Here you can see the whole code for the computed property example, which you can copy and run in your browser.

Here is the full code:

<!DOCTYPE HTML>

<html>
	
	<head>

			<title></title>

	</head>

	<body>

		<div id="root">

			<h1>List of Complete Tasks:</h1>
			<ul>
				<li v-for="task in tasks" v-if="task.completed" v-text="task.description"></li>
			</ul>

			<h1>List of Incomplete Tasks:</h1>
			<ul>
				<li v-for="task in incompleteTasks" v-text="task.description"></li>
			</ul>

		</div>

		

		<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

		<script>

			
			var app = new Vue({

				el: '#root',

				data:  {

					tasks: [
						{description:'the description 1', completed:true},
						{description:'the description 2', completed:true},
						{description:'the description 3', completed:false},
						{description:'the description 4', completed:true},
						{description:'the description 5', completed:true},
						{description:'the description 6', completed:false},
					]

				},

				computed: {
					incompleteTasks(){
						return this.tasks.filter(task => ! task.completed);

						// Another way
						// this.tasks.filter(function(task){
						// 	return ! task.completed;
						// })
					}
				}

				

			});

		</script>

	</body>
</html>

Code Explanation:

<ul>
				<li v-for="task in tasks" v-if="task.completed" v-text="task.description"></li>
			</ul>

Here we made a list of descriptions from the task list. v-for is looping the tasks as a task. v-if is a condition that checked from the tasks list that task is completed as true or not. and v-text prints the description from the tasks list.

<ul>
				<li v-for="task in incompleteTasks" v-text="task.description"></li>
			</ul>

The above list has the defined computed properties incompleteTasks. This list the tasks from the incompleteTasks properties we have to make a function that filer the tasks.

computed: {
					incompleteTasks(){
						return this.tasks.filter(task => ! task.completed);

						// Another way
						// this.tasks.filter(function(task){
						// 	return ! task.completed;
						// })
					}
				}

That returns the false completed list. In the above code you can see the alternate function also to easily understand, both give the same outputs.

This list will be automatically updated if the list’s completed status true/false will change.

Output:

vue-computed-properties output

You can try this on your own, So this article tutorial is about the Vue JS 2 computed properties: Tutorial 3. Keep learning from the vue js 2 series. You can check the previous tutorial here Vue JS 2 Event Listeners with a list: Tutorial 2 Good Luck!

Leave a Reply

Your email address will not be published. Required fields are marked *