Информация о компонентах - Содержимое метки визуализированного компонента: неправильный ответ - PullRequest
Новая
       73

Информация о компонентах - Содержимое метки визуализированного компонента: неправильный ответ

0 голосов
/ 16 марта 2020

Я пытаюсь решить этот простой вопрос, связанный с компонентами: https://www.testdome.com/questions/37239?generatorId=119&questionIds=37237%2C37238%2C37239&type=FromTest#

В общем, задача состоит в том, чтобы использовать компонент 

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

и отображать результат должно быть: 

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

Компонент должен быть в состоянии использовать в родительских элементах div с разными идентификаторами, и разработчики захотят указать разные значения для идентификатора элемента и его содержимого.

Мой код работает, но у меня 2 прохода / 1 сбой, и я понятия не имею, что я сделал неправильно: 

<!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

 Vue.component('labeledinput', {
  props: ['id'],
    data() {
      return {
        newid: this.id,
      }
    },   
  template: `<div>
<label :for="newid">Username: </label>
<input type="text" :id="newid">
    </div>`
});   

    var vm = new Vue({
      el: '#app',
  data() {
    return {
      username: 'username'
    }
  } 
    });

    // Example case
    console.log(document.getElementById("app").innerHTML);
  </script>
</body>
</html>

Мой результат 

Tests: 2 pass / 1 fail
  Example case: Correct answer 
  Html attributes of rendered component: Correct answer 
  Label content of rendered component: Wrong answer

Вывод идентичен требуемому 

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

Что я делаю не так?

...