Vue JS Interview Questions and Answers
Question - 71 : - What are possible prop types?
Answer - 71 : -
You can declare props with type or without type. But it is recommended to have prop types because it provides the documentation for the component and warns the developer for any incorrect data type being assigned.
props: {
name: String,
age: Number,
isAuthenticated: Boolean,
phoneNumbers: Array,
address: Object
}
As mentioned in the above code snippet, you can list props as an object, where the properties’ names and values contain the prop names and types, respectively.
Question - 72 : - What is the data flow followed by props?
Answer - 72 : -
All props follows a one-way-down binding between the child property and the parent one. i.e, When the parent property is updated then that latest prop value will be passed down to the child, but not the otherway(child to parent) around. The child component should not mutate the prop otherwise it throws a warning in the console. The possible mutation cases can be solved as below,
When you try to use parent prop as initial value for child property:
In this case you can define a local property in child component and assign parent value as initial value
props: ['defaultUser'],
data: function () {
return {
username: this.defaultUser
}
}
When you try to transform the parent prop:
You can define a computed property using the prop’s value,
props: ['environment'],
computed: {
localEnvironment: function () {
return this.environment.trim().toUpperCase()
}
}
Question - 73 : - What are non prop attributes?
Answer - 73 : -
A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
For example, If you are using a 3rd-party custom-input component that requires a data-tooltip attribute on the input then you can add this attribute to component instance,
If you try to pass the props from parent component the child props with the same names will be overridden. But props like class and style are exception to this, these values will be merged in the child component.
Question - 74 : - How can you handle Events in Vue.js?
Answer - 74 : -
See the following example which demonstrates how to handle Events in Vue.js:
HTML Code:
Name:
div>
JS Code:
var myViewModel = new Vue({
el: '#app',
data: my Model,
// A click handler inside methods
methods: {
ClickHandler: function(e) {
alert("Hello " + this.name);
}
}
});
Question - 75 : - What are the most commonly used Directives in Vue.js? / What do you understand by the conditional directives in Vue.js?
Answer - 75 : -
There are a set of directives in Vue.js used to show or hide elements according to the conditions. These directives are also known as conditional directives.
- v-if
- v-else
- v-else-if
- v-show
- v-model
- v-on
v-if directive: The v-if directive is used to add or remove the DOM elements based on the given expression. For example, the below button will not show if isLoggedIn if you set it to false.
The v-if directive also facilitates you to control multiple elements with a single v-if statement by wrapping all the elements in a element with the condition. For example, you can conditionally apply both label and button together.
v-else directive: The v-else directive is used to display content only when the expression adjacent v-if set to false. This is same as else block in any programming language to display alternative content and it is preceded by v-if or v-else-if block. You don't need to pass any value to this. For example, v-else is used to display LogIn button if isLoggedIn is set to false (not logged in).
v-else-if directive: The v-else-if directive is used when you want more than two options to be checked. For example, if you want to display some text instead of LogIn button when ifLoginDisabled property is set to true, you can achieve this through v-else statement.
v-show directive: The v-show directive is similar to v-if but it renders all elements to the DOM and then uses the CSS display property to show/hide elements. This directive is preferred if you want the elements to switch on and off frequently.
Welcome user,{{user.name}}
Question - 76 : - What are the array detection mutation methods in Vue.js?
Answer - 76 : -
As the name suggests, the array detection mutation methods in Vue.js are used to modify the original array. Following is a list of array mutation methods which trigger view updates:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
When you perform any of the above mutation methods on the list, then it triggers view update.
Question - 77 : - What are the array detection non-mutation methods in Vue.js?
Answer - 77 : -
The array detection non-mutation methods in Vue.js are the methods that do not mutate the original array but always return a new array.
Following is a list of the non-mutation methods:
filter()
concat()
slice()
For example, let's take a todo list where it replaces the old array with new one based on status filter:
vmvm.todos = vm.todos.filter(function (todo) {
return todo.status.match(/Completed/)
})
Question - 78 : - What are the different event modifiers Vue.js provides?
Answer - 78 : -
Normally, JavaScript provides event.preventDefault() or event.stopPropagation() inside event handlers. We can use Vue.js methods, but these methods are meant for data logic instead of dealing with DOM events.
Vue.js provides the following event modifiers for v-on and these modifiers are directive postfixes denoted by a dot symbol.
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
See the following example of stop modifier:
Example of chain modifiers as follows:
Question - 79 : - Give an example to demonstrate how can you use event handlers?
Answer - 79 : -
Event handlers are used in Vue.js are similar to plain JavaScript. The method calls also support the special $event variable.
Example:
Submit
methods: {
show: function (message, event) {
// now we have access to the native event
if (event) event.preventDefault()
console.log(message);
}
}
Question - 80 : - Give an example to demonstrate how do you define custom key modifier aliases in Vue.js?
Answer - 80 : -
We can define custom key modifier aliases via the global config.keyCodes. Following are some guidelines for the properties:
We can't use camelCase. Instead, we should use a kebab-case with double quotation marks.
We can define multiple values in an array format.
See the example:
Vue.config.keyCodes = {
f1: 112,
"media-play-pause": 179,
down: [40, 87]
}