v-if="button === 'right'"
v-on:mousedown.right="increment"
v-on:mousedown.left="decrement"
/>
Question - 84 : - What are the supported modifiers on the v-model directive in Vue.js?
Answer - 84 : -
Following are the three modifiers supported for the v-model directive in Vue.js:
lazy: By default, the v-model directive syncs the input with the data after each input event. We can add the lazy modifier to instead sync after change events.
number: The number modifier is used to our v-model when we want user input to be automatically typecast as a number. With the type="number", the value of HTML input elements always returns a string. That's why this typecast modifier is required.
trim: We should add the trim modifier to our v-model when we want whitespace from user input to be trimmed automatically.
Question - 85 : - When the components need a single root element?
Answer - 85 : -
In Vue.js 2.x version, every component must have a single root element when template has more than one element. In this case, you need to wrap the elements with a parent element.
Otherwise, it will show an error, saying that "Component template should contain exactly one root element,"
The Vue.js 3.x version facilitates that the components now can have multiple root nodes. This way of adding multiple root nodes is called as fragments.
{{ title }}
Question - 86 : - What do you understand by global registration in components in Vue.js?
Answer - 86 : -
The global registration in components in Vue.js facilitates us to use it in the template of any root Vue instance (new Vue) created after registration.
In the global registration, the components created using Vue.component as follows:
Vue.component('my-component-name', {
// ... options ...
})
We can take multiple components which are globally registered in the vue instance,
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
The above components can be used in the vue instance as follows:
Question - 87 : - What is the purpose of using v-for directive in Vue.js?
Answer - 87 : -
In Vue.js, the v-for directive is used because it allows us to loop through items in an array or object. By using this directive, we can iterate on each element in the array or object.
Example of v-for directive usage in Array:
{{ index }} - {{ item.message }}
var vm = new Vue({
el: '#list',
data: {
items: [
{ message: 'Alex' },
{ message: 'Muler' }
]
}
})
We can also use the delimiter instead of in, similar to JavaScript iterators.
Example of v-for directive usage in Object:
{{ index }}. {{ key }}: {{ value }}
var vm = new Vue({
el: '#object',
data: {
user: {
firstName: 'Alex',
lastName: 'Muller',
age: 30
}
}
})
Question - 88 : - Give an example to demonstrate how do you reuse elements with key attribute?
Answer - 88 : -
Vue.js always facilitates us to render elements as efficiently as possible. So, it is possible to reuse the elements instead of building them from scratch. But this can create problems in few scenarios. For example, if you try to render the same input element in both v-if and v-else blocks then it holds the previous value as follows:
In the above case, we should not reuse it. It is better to make both input elements as separate by applying key attribute as follows:
In the above example, both inputs are independent and do not impact each other.
Question - 89 : - Why is it recommended to use a key attribute for directive?
Answer - 89 : -
It is recommended to use a key attribute for a directive to track each node's identity and thus reuse and reorder existing elements. We have to provide a unique key attribute for each item with in v-for iteration. An ideal value for the key would be the unique id of each item.
Example:
That's why it is always recommended to provide a key with v-for whenever possible unless the iterated DOM content is simple.
Question - 90 : - What do you understand by the array detection non-mutation methods?
Answer - 90 : -
The methods that do not mutate the original array but always return a new array are known as non-mutation methods.
Following is a list of the non-mutation methods:
- filter() method
- concat() method
- slice() method
Let's take an example to understand it better. We have a todo list replacing the old array with a new one based on the status filter.
Example:
vmvm.todos = vm.todos.filter(function (todo) {
return todo.status.match(/Completed/)
})
This approach would not re-render the entire list due to Vue.js implementation.