Task Completed #1
Conversation
| <p v-else>List is empty.</p> | ||
| <h2>Favorites List</h2> | ||
| <ul v-if="favoriteList.length"> | ||
| <li v-for="(item, index) in favoriteList" :key="index">{{ item }}</li> |
There was a problem hiding this comment.
The :key is a shorthand version of the v-bind:key directive. Similar to v-on:click - @click
| <ul v-if="favoriteList.length"> | ||
| <li v-for="(item, index) in favoriteList" :key="index">{{ item }}</li> | ||
| </ul> | ||
| <form @submit.prevent="addItem"> |
There was a problem hiding this comment.
This code uses the concept of modifiers - the same concept as to how to react to an event in more detail.
| </ul> | ||
| <form @submit.prevent="addItem"> | ||
| <label for="newItem">Add new item:</label> | ||
| <input type="text" id="newItem" v-model="newItem"> |
There was a problem hiding this comment.
v-modal is a new way for two-way binding. It's majorly used for forms - It automatically handles what to look at and what to change. It's a handy directive.
This is same as:
<input v-model="searchText">as this:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
| evaluate() { | ||
| console.log('Evaluate') | ||
| addItem() { | ||
| if (this.newItem.trim() !== '') { |
There was a problem hiding this comment.
Normally this refers to the current object - so it looks for the newItem - It is the only way to to track the variables inside data in methods. But this will be changed when we look at composition API :D
There was a problem hiding this comment.
Great work 🥇 @Gopika4112 - I've added comments for to convey the stuff that is happening underneath
2 participants
No description provided.