Запись в объект data, vue.js

619
30 мая 2017, 02:18

Хочу реализовать подобие регистрации и авторизации. Во время сабмита регистрационной формы, собираю данные из ее полей и добавляю их в массив объекта data при помощи this.users.push(). В результате всё добавляется, всё ок, но интересует насколько вообще это идеологически верно? Не нарушаются ли при этом какие-нибудь правила работы с MVVM или что-нибудь в таком духе?

P. S. также буду рад услышать советы по работе с формой, мне кажется, что тут тоже не всё правильно.

console.clear(); 
 
const data = { 
  regauth: { 
    reg: true, 
    activeClass: 'reg-auth__li--active', 
    ordinaryClass: 'reg-auth__li' 
  }, 
  users: [ 
 
  ], 
 
}; 
 
const app = new Vue({ 
  el: '#app', 
  data: data, 
  methods: { 
    regSubmit: function(event) { 
      this.users.push({ 
        'username': document.getElementById('username').value, 
        'login': document.getElementById('login').value, 
        'password': document.getElementById('password').value, 
      }); 
 
      event.target.reset(); 
 
      console.log(data); 
    } 
  } 
});
@import url("https://fonts.googleapis.com/css?family=Roboto:300,700&subset=cyrillic"); 
*:before, 
*:after, 
* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
  font-family: Roboto; 
  font-weight: 300; 
} 
 
main { 
  max-width: 1000px; 
  margin: 0 auto; 
  border-left: 1px solid #000; 
  border-right: 1px solid #000; 
} 
 
main[v-cloak] { 
  display: none; 
} 
 
.reg-auth { 
  padding: 15px; 
  background-color: #fafafa; 
} 
 
.reg-auth__options { 
  text-align: center; 
  margin: 0; 
  padding: 0; 
  margin-bottom: 1em; 
} 
 
.reg-auth__li { 
  list-style-type: none; 
  display: inline-block; 
  text-align: center; 
  font-weight: bold; 
  font-size: 22px; 
  margin: 0 20px; 
  color: lightblue; 
  border-bottom: 2px dashed lightblue; 
  cursor: default; 
} 
 
.reg-auth__li--active { 
  border-bottom-color: transparent; 
  color: #000; 
} 
 
.input-field { 
  padding: 7px 10px; 
  border: 1px solid #666; 
  width: 300px; 
} 
 
.btn-ok { 
  padding: 10px 15px; 
  font-size: 18px; 
  border: none; 
} 
 
.btn-ok { 
  background-color: #09a942; 
  color: #fff; 
} 
 
.form__line { 
  margin-bottom: .8em; 
  width: 300px; 
  margin-left: auto; 
  margin-right: auto; 
} 
 
.form__line--submit { 
  text-align: center; 
  margin-top: 1.5em; 
} 
 
.form label { 
  display: block; 
  margin-bottom: .3em; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
<main role="main" id="app" v-cloak> 
  <section class="reg-auth"> 
    <ul class="reg-auth__options"> 
      <li v-on:click="regauth.reg = true" v-bind:class="[ regauth.reg ? regauth.activeClass : '', regauth.ordinaryClass ]">Регистрация</li> 
      <li v-on:click="regauth.reg = false" v-bind:class="[ !regauth.reg ? regauth.activeClass : '', regauth.ordinaryClass ]">Авторизация</li> 
    </ul> 
    <section class="registration" v-if="regauth.reg"> 
      <article class="registration__body"> 
        <form id="reg-form" class="form" @submit.prevent="regSubmit"> 
          <div class="form__line"> 
            <label for="username">Имя</label> 
            <input id="username" type="text" placeholder="Имя" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="login">Логин</label> 
            <input id="login" type="text" placeholder="Логин" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="password">Пароль</label> 
            <input id="password" type="password" placeholder="Пароль" class="input-field" /> 
          </div> 
          <div class="form__line form__line--submit"> 
            <button role="button" class="btn-ok">Зарегистрироваться</button> 
          </div> 
        </form> 
      </article> 
    </section> 
 
    <section class="authentication" v-if="!regauth.reg"> 
      <article class="authentication__body"> 
        <form class="form"> 
          <div class="form__line"> 
            <label for="a-login">Логин</label> 
            <input id="a-login" type="text" placeholder="Логин" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="a-pass">Пароль</label> 
            <input id="a-pass" type="password" placeholder="Пароль" class="input-field" /> 
          </div> 
          <div class="form__line form__line--submit"> 
            <button role="button" class="btn-ok">Войти</button> 
          </div> 
        </form> 
      </article> 
    </section> 
  </section> 
</main>

Answer 1

В документации есть раздел, посвященный работе с формами: https://ru.vuejs.org/v2/guide/forms.html

Вообще не рекомендуется напрямую работать с dom, а использовать реактивные свойства для получения значений из полей. В вашем случае можно было сделать так:

console.clear(); 
 
const data = { 
  regauth: { 
    reg: true, 
    activeClass: 'reg-auth__li--active', 
    ordinaryClass: 'reg-auth__li', 
    username: '', 
    login: '', 
    password: '' 
  }, 
  users: [ 
 
  ], 
 
}; 
 
const app = new Vue({ 
  el: '#app', 
  data: data, 
  methods: { 
    regSubmit: function(event) { 
      this.users.push({ 
        'username': this.regauth.username, 
        'login': this.regauth.login, 
        'password': this.regauth.password, 
      }); 
 
      this.regauth.username = "" 
      this.regauth.login = "" 
      this.regauth.password = "" 
 
      console.log(data); 
    } 
  } 
});
@import url("https://fonts.googleapis.com/css?family=Roboto:300,700&subset=cyrillic"); 
*:before, 
*:after, 
* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
  font-family: Roboto; 
  font-weight: 300; 
} 
 
main { 
  max-width: 1000px; 
  margin: 0 auto; 
  border-left: 1px solid #000; 
  border-right: 1px solid #000; 
} 
 
main[v-cloak] { 
  display: none; 
} 
 
.reg-auth { 
  padding: 15px; 
  background-color: #fafafa; 
} 
 
.reg-auth__options { 
  text-align: center; 
  margin: 0; 
  padding: 0; 
  margin-bottom: 1em; 
} 
 
.reg-auth__li { 
  list-style-type: none; 
  display: inline-block; 
  text-align: center; 
  font-weight: bold; 
  font-size: 22px; 
  margin: 0 20px; 
  color: lightblue; 
  border-bottom: 2px dashed lightblue; 
  cursor: default; 
} 
 
.reg-auth__li--active { 
  border-bottom-color: transparent; 
  color: #000; 
} 
 
.input-field { 
  padding: 7px 10px; 
  border: 1px solid #666; 
  width: 300px; 
} 
 
.btn-ok { 
  padding: 10px 15px; 
  font-size: 18px; 
  border: none; 
} 
 
.btn-ok { 
  background-color: #09a942; 
  color: #fff; 
} 
 
.form__line { 
  margin-bottom: .8em; 
  width: 300px; 
  margin-left: auto; 
  margin-right: auto; 
} 
 
.form__line--submit { 
  text-align: center; 
  margin-top: 1.5em; 
} 
 
.form label { 
  display: block; 
  margin-bottom: .3em; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
<main role="main" id="app" v-cloak> 
  <section class="reg-auth"> 
    <ul class="reg-auth__options"> 
      <li v-on:click="regauth.reg = true" v-bind:class="[ regauth.reg ? regauth.activeClass : '', regauth.ordinaryClass ]">Регистрация</li> 
      <li v-on:click="regauth.reg = false" v-bind:class="[ !regauth.reg ? regauth.activeClass : '', regauth.ordinaryClass ]">Авторизация</li> 
    </ul> 
    <section class="registration" v-if="regauth.reg"> 
      <article class="registration__body"> 
        <form id="reg-form" class="form" @submit.prevent="regSubmit"> 
          <div class="form__line"> 
            <label for="username">Имя</label> 
            <input v-model="regauth.username" type="text" placeholder="Имя" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="login">Логин</label> 
            <input v-model="regauth.login" type="text" placeholder="Логин" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="password">Пароль</label> 
            <input v-model="regauth.password" type="password" placeholder="Пароль" class="input-field" /> 
          </div> 
          <div class="form__line form__line--submit"> 
            <button role="button" class="btn-ok">Зарегистрироваться</button> 
          </div> 
        </form> 
      </article> 
    </section> 
 
    <section class="authentication" v-if="!regauth.reg"> 
      <article class="authentication__body"> 
        <form class="form"> 
          <div class="form__line"> 
            <label for="a-login">Логин</label> 
            <input id="a-login" type="text" placeholder="Логин" class="input-field" /> 
          </div> 
          <div class="form__line"> 
            <label for="a-pass">Пароль</label> 
            <input id="a-pass" type="password" placeholder="Пароль" class="input-field" /> 
          </div> 
          <div class="form__line form__line--submit"> 
            <button role="button" class="btn-ok">Войти</button> 
          </div> 
        </form> 
      </article> 
    </section> 
  </section> 
</main>

Также, учитывая, что это учебный пример и пользователи должны сохранятся в localStorage, имеет смысл инкапсулировать взаимодействие с ним, создав отдельный объект с минимальным набором функций типа чтения, записи элемента/элементов.

READ ALSO
Почему each не работает
javascript

Почему each не работает

Код

 324
jQuery: обработчик on не работает на созданный Javascript элемент
javascript

jQuery: обработчик on не работает на созданный Javascript элемент

Здравствуйте!

 270
SpeechSynthesis, как получить wav файл?
javascript

SpeechSynthesis, как получить wav файл?

Нашел функционал который переводит текст в аудио произношение:

 276
Динамическое значение атрибута в jQuery
javascript

Динамическое значение атрибута в jQuery

В jQuery значение переменной number считывается с value поля input в котором атрибут name в данном примере равен 2, вот так:

 361