почему проверка электронной почты в vue для ввода не работает, если id div удален

Question

Я очень новичок в vuejs, я хочу узнать из этого codepen (не моего), почему, если мы удалим div с id = "app", не получится поле ввода валидатора электронной почты.

<div class="container" id="app">
  <div :class="['input-group', isEmailValid()]">
    <span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
    <input type="email" class="form-control" placeholder="Email Address" v-model="email" />
  </div>
</div>

Я хочу подать иск на это поле ввода валидатора электронной почты в моем отдельном файловом компоненте, т.е. (.vue), если я добавлю атрибут el: '#app', я все равно не смогу найти элемент app в консоли. даже если я оставлю div с id="app"

Я пробовал это:

  <div :class="['input-group', isEmailValid()]"  id="app>
    <span class="input-group-addon" id="basic-addon1"><span class="fa fa-envelope"></span></span>
    <input type="email" class="form-control" placeholder="Email Address" v-model="email" />
  </div>

чтобы разместить его в моем отдельном файловом компоненте, но он не работает!

Answer 1

Это потому, что Vue не знает, где монтировать.

см. new Vue({ el: '#app' в сценарии? Если вы хотите изменить идентификатор, измените и идентификатор div, и значение el. Если вы удалите его, вам нужно будет найти другой способ монтирования.