Try to solve 3 Vue.js interview questions and Vue interview questions below. Hints can help you find answers to questions you are having trouble with.

1. Toggle Message

Directives Event handling
   
Easy 

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.

HTML5, CSS3, Vue v2  
 


  •   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

Directives Event handling
   
Easy 

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>Franklin</td>
</tr>
HTML5, CSS3, Vue v2  
 


  •   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

Components
   
Hard 

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.

HTML5, CSS3, Vue v2  
 


  •   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

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

Vue.js Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.