The Vue.js online test assesses candidates' knowledge of programming using the Vue.js library and their ability to leverage commonly used programming patterns.

It's an ideal test for pre-employment screening. A good Vue.js developer needs to be able to solve problems using the Vue.js library and also know how to solve problems in the Vue way.

This test asks candidates to solve coding problems in Vue and find and fix bugs in Vue programs.

Recommended Job Roles
JavaScript Developer
Vue.js Developer
Web Front-End Developer
Sample Candidate Report

Sample Free Questions

Toggle Message

7min
  -  
Easy 
  -  
CODE

Vue.js Directives Event handling Public New

Page contains an anchor element and a paragraph below it. The paragraph's visibility should be toggled by clicking on an anchor element with the following logic:

  • At start, paragraph should not be visible
  • After a click, paragraph should be visible
  • After another click, paragraph should not be visible again

Implement the following logic by adding missing attributes to anchor and paragraph elements.

Add Users

15min
  -  
Easy 
  -  
CODE

Vue.js Directives Event handling Public New

A website requires a page for adding users to the table Users. Users can be added in two ways:

  • By specifying their first name and last name with input elements, and then clicking on "Add user" button. After user is added, input elements should be cleared.
  • By executing the following JavaScript code: vm.users.push({firstName: "John", lastName: "Doe" })

After a user is added, it should be listed in the table Users, where the index column should start from 1.

For example, after executing vm.users.push({firstName: "John", lastName: "Doe" }) and adding Ann Franklin through UI, the tbody part of the Users table should be:

<tr>
  <td>1</td>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>2</td>
  <td>Ann</td>
  <td>Franlin</td>
</tr>

Labeled Input

10min
  -  
Hard 
  -  
CODE

Vue.js Components Public New

A developer team wants to have a component that is made from a label and an input element. Implement a Vue.js component so that reusable element defined as:

<labeledinput id="username">Username: </labeledinput>

is rendered as:

<div>
  <label for="username">Username: </label>
  <input type="text" id="username">
</div>

The component should be able to be used under parent divs with different ids, and developers will want to specify different values for an element's id and an element's content.

Use Free Questions On a Trial Plan

Premium Questions

The premium question library contains our unique, hand-crafted questions. We offer a refund if you find any of them answered online.

Skills
Vue.js Computed properties Directives Components Event handling Binding
Pricing For Premium Questions