@Artem0071
Безработный mr. Junior

Реактивные атрибуты класса?

Есть некий компонент в котором я получаю данные с апи и вывожу их
Код что то в этом роде из себя представляет:
<template>
  <div v-if="user">
     <input v-model="user.name" />
  </div>
</template>

<script>
export default {
  data: () => ({
    user: null
  }),
  methods: {
    loadUser () {
        this.$api.users.show(userId) {
           //from response get user instance...
          this.user = response
        }
    }
  }
}
</script>


Так вот, что то задумался и захотелось создать отдельный класс с моделью пользователя, и при этом реагировать на изменения атрибутов
Пришел к такой структуре:
export default class User {
    constructor (payload) {
        this._original = payload
        this._attributes = User.refactorPayload(payload)
        this._changed = {}
    }


И данные хотел отображать в компоненте как:
user.getAttribute('name')

Это все сделал, но столкнулся с проблемой two-way-binding

У меня все атрибуты содержаться в _attributes

В общем я не знаю как сделать геттер-сеттеры в js...
С геттерами получилось через обертку getAttribute:
getAttribute(key){
        if (this._attributes.hasOwnProperty(key)) {
            return this._attributes[key]
        }

        return null
}


Но если я в v-model вставлю user.getAttribute('name'), то соответственно ничего не изменится
В общем я не знаю как это правильно нужно организовать...
Помогите пожалуйста
Не хочется делать через user._attributes.name, а хочется как то более "правильнее" что ли..
  • Вопрос задан
  • 157 просмотров
Решения вопроса 1
muzikant777
@muzikant777
PHP/Vue разработчик
Вариант "в лоб" - не использовать "сахарок" в виде v-model, а использовать
<input :value="user.getAttribute('name')" @input="e => user.setAttribute('name', e.target.value)"/>


А вообще, зачем такая странная организация класса модели? Почему не отказались от определения свойств User явно? Была бы и наглядность и дополнение кода от IDE.

Второй вариант, если уж прям так хочется извращаться с подобной реализацией модели, использовать механизм геттеров/сеттеров самого языка:
// age будет высчитывать возраст по birthday
  Object.defineProperty(this, "age", {
    get: function() {
      var today = new Date();
      var yearDelta = today.getFullYear() - this.birthday.getFullYear();

      if (today.getMonth() > this.birthday.getMonth() ||
        (today.getMonth() === this.birthday.getMonth() && today.getDate() >= this.birthday.getDate())) {
        return yearDelta;
      }

      return yearDelta - 1;
    }
  });
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@grinat
Нахер ты эту дичь творишь? Вуе за тебя уже объявляет реактивные геттеры и сеттеры: https://github.com/vuejs/vue/blob/dev/src/core/obs... там two way binding и все остальное уже есть.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы