Labeled Input

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 usable with any root Vue instance, and developers should be able to specify different values for an element's id and an element's content.

HTML5, CSS3, Vue v2

Show starting code

<!DOCTYPE html>
<html>
<head>
  <title>Labeled Input</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <labeledinput id="username">Username: </labeledinput>
  </div>
  <script>
    // Write your code here    
    
    var vm = new Vue({
      el: '#app'
    });
    
    // Example case
    console.log(document.getElementById("app").innerHTML);
  </script>
</body>
</html>

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

Use this question for your test

<< Previous Next >> Back to questions

Score Distribution

# of candidates

0-33%
34-67%
68-100%

Score

Would you like to see our other questions?

We have 1000+ premium hand-crafted questions for 160+ job skills and 20+ coding languages. We prefer questions with small samples of actual work over academic problems or brain teasers.

Visit our question library

Private Concierge

Send us an email with an explanation of your testing needs and a list of candidates. We will create an appropriate test, invite your candidates, review their results, and send you a detailed report.

Contact Private Concierge

Would you like to see our tests? The following tests contain Vue.js related questions:

HTML/CSS and Vue.js Online Test

HTML/CSS, Vue.js, and Node.js Online Test

HTML/CSS, Vue.js, Node.js, and SQL Online Test

Vue.js Online Test

On the TestDome Blog

Screening Applicants: The Good, the Bad and the Ugly

Since we’re all biased and we use incorrect proxies, why not just outsource hiring to experts or recruitment agencies? After all, they’ve been screening people for many years, so they must know how to do it right?

Not really. I was surprised to discover that many experts disagree with each other. Everybody praises their pet method and criticizes the others. Many of these methods look legitimate, but are based on...