Vue.js Interview Questions

Want to become an expert in cracking Vue.js interview questions/Vue interview questions?

Start with practicing the questions below. Whether a question involves multiple choice or live coding, we will give you hints as you go and tell you if your answers are correct or incorrect.

After that, take our timed public Vue.js Interview Questions Test.

To use our service for testing candidates, buy a pack of candidates.


1. Toggle Message

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.

Easy 
7min
HTML5, CSS3, Vue v2  
 


Run OK, but 3 out of 3 test cases fail:

  •   At start, paragraph should not be visible: Wrong answer
  •   After a click, paragraph should be visible: Wrong answer
  •   After a second click, paragraph should not be visible again: Wrong answer


2. Add Users

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>
Easy 
15min
HTML5, CSS3, Vue v2  
 


Run OK, but 4 out of 4 test cases fail:

  •   Example case: Exception
  •   Add users from UI: Wrong answer
  •   Add users from code: Exception
  •   Fields are cleared after adding users from UI: Wrong answer


3. Labeled Input

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.

Hard 
10min
HTML5, CSS3, Vue v2  
 


Run OK, but 3 out of 3 test cases fail:

  •   Example case: Exception
  •   Html attributes of rendered component: Wrong answer
  •   Label content of rendered component: Wrong answer


If you feel ready, take one of our timed public Vue.js Interview Questions tests:
  • HTML/CSS and Vue.js Online Test (Easy / Hard)
  • HTML/CSS, Vue.js, and Node.js Online Test (Easy / Hard)
  • HTML/CSS, Vue.js, Node.js, and SQL Online Test (Easy / Hard)
  • Vue.js Online Test (Easy / Hard)
Not exactly what you are looking for? Go to our For Jobseekers section.