v-for="user in users"
:key="user.id"
>
{{ user.name }}
Question - 53 : - Why do you need to use key attribute on for directive?
Answer - 53 : -
In order to track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item with in v-for iteration. An ideal value for key would be the unique id of each item.
Let us take an example usage,
Hence, It is always recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple.
Question - 54 : - What are the array detection mutation methods?
Answer - 54 : -
As the name suggests, mutation methods modifies the original array.
Below are the list of array mutation methods which trigger view updates.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,
vm.todos.push({ message: 'Baz' })
Question - 55 : - What are the array detection non-mutation methods?
Answer - 55 : -
The methods which do not mutate the original array but always return a new array are called non-mutation methods.
Below are the list of non-mutation methods,
For example, lets take a todo list where it replaces the old array with new one based on status filter,
vm.todos = vm.todos.filter(function (todo) {
return todo.status.match(/Completed/)
})
This approach won't re-render the entire list due to VueJS implementation.
Question - 56 : - What are the caveats of array changes detection?
Answer - 56 : -
Vue cannot detect changes for the array in the below two cases,
When you directly set an item with the index,For example,
vm.todos[indexOfTodo] = newTodo
When you modify the length of the array, For example,
vm.todos.length = todosLength
You can overcome both the caveats using set and splice methods, Let's see the solutions with an examples,
First use case solution
// Vue.set
Vue.set(vm.todos, indexOfTodo, newTodoValue)
(or)
// Array.prototype.splice
vm.todos.splice(indexOfTodo, 1, newTodoValue)
Second use case solution
vm.todos.splice(todosLength)
Question - 57 : - What are the caveats of object changes detection?
Answer - 57 : -
Vue cannot detect changes for the object in property addition or deletion.
Lets take an example of user data changes,
var vm = new Vue({
data: {
user: {
name: 'John'
}
}
})
// `vm.name` is now reactive
vm.user.email = john@email.com // `vm.user.email` is NOT reactive
You can overcome this scenario using the Vue.set(object, key, value) method or Object.assign(),
Vue.set(vm.user, 'email', 'john@email.com');
// (or)
vm.user = Object.assign({}, vm.user, {
email: john@email.com
})
Question - 58 : - How do you use v-for directive with a range?
Answer - 58 : -
You can also use integer type(say 'n') for v-for directive which repeats the element many times.
Question - 59 : - How do you use event handlers?
Answer - 59 : -
You can use event handlers in vue similar to plain javascript. The method calls also support the special $event variable.
Submit
methods: {
show: function (message, event) {
// now we have access to the native event
if (event) event.preventDefault()
console.log(message);
}
}
Question - 60 : - What are the event modifiers provided by vue?
Answer - 60 : -
Normally, javascript provides event.preventDefault() or event.stopPropagation() inside event handlers. You can use methods provided by vue, but these methods are meant for data logic instead of dealing with DOM events. Vue provides below event modifiers for v-on and these modifiers are directive postfixes denoted by a dot.
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
Let's take an example of stop modifier,
You can also chain modifiers as below,