1

Делаю одностраничное приложение. На странице есть несколько форм, каждая из которых позволяет добавлять информацию в БД. И формы эти между собой связаны - сначала заполняешь одну, потом вторую и т.п. Одновременно с этим можно загрузить данные из БД в эти формы для редактирования и последующего обновления этих данных в БД.

Каждую форму я вынес в компонент. Для реактивности полям в форме назначил :value="". Если в Хранилище (vuex) есть данные, то они будут загружены в эти поля. Но как быть, когда данных в харнилище нет? Возникает резонная ошибка и компонент не отображается.

Ближе к сущностям. На странице есть форма для регистрации данных человека: ФИО, адрес и др. В хранилище две переменные:

  • person - для данных пользователя, которые получим из БД и которыми нужно будет автоматически заполнить форму + данные человека, которые сюда попадут из формы при нажатии кнопки "добавить" (а затем будут записаны в БД).
  • person_id - переменная для идентификатора человека, данные которого следует загрузить из БД (и заполнить ими форму). Если пусто тут, значит форма пустая.

Код предаставлен ниже:

export const store = new Vuex.Store({
        state: {
            person_id: 120,
            person: {},
        },

Таким образом планирую использовать одну форму и для создания новых записей. И для загрузки\редактирования существующих.

Но как быть с тем, что форма изначально при загрузке страницы пустая? Т.к. она пустая, а в форме проставлены :value="person.surname" и т.д., то возникает ошибка. И компонент (форма) вовсе не отображается.

Неужели единственное решение - вручную прописывать пустой объект по умолчанию в хранилище? Или есть другие варианты?

1 ответ 1

2

Как сказано в документации:

Vue не может отследить добавление или удаление свойства объекта. Чтобы поле стало реактивным, Vue превращает его в пару геттер/сеттер в ходе инициализации экземпляра.

Чтобы динамически добавить реактивное свойство, вам необходимо использовать метод:

Vue.set(this.object, key, value)

или

this.$set(this.object, key, value)

Иногда нужно добавить несколько свойств в существующий объект, например, с помощью Object.assign() или _.extend()

В данном случае документация советует использовать следующий метод:

this.object = Object.assign({}, this.object, { key1: value1, key2: value2 })

Поскольку

Vuex — это реактивная переменная Vue

производить мутации по добавлению новых свойств у объекта вам необходимо тем же способом, что и в самом Vue.

Подробнее прочитайте в разделе документации Vue "Подробно о реактивности" и в разделе документации Vuex "Мутации"

6
  • А можно более конретизировать? Т.е. получается, изначально к полям формы у меня не добавлены никакие "реактивные свойства". А уже после получения данных я к этим input должен добавить реактивность? А как в методе получить определённый imput и назначить ему реактивное value?
    – n.osennij
    26 янв 2018 в 16:41
  • Нет, добавлять реактивность к input вам не нужно. Вы можете поступить следующим образом - поля формы в самой форме задавать в цикле, например: <input type="text" v-for="input in person" :key="input.id" :value="input.value"> и поскольку свойства, которые вы будете создавать, способом, как было описано в ответе выше - они будут становится реактивными и автоматически отобразятся в вашей форме. Можете посмотреть на примере TodoMVC из документации , когда элемент добавляется, он автоматически отображается в списке. 26 янв 2018 в 19:46
  • Мг. Но в форме у меня есть input text, date, select, range... Получается, что где-то на сервере нужно ещё хранить какого типа какие поля?
    – n.osennij
    26 янв 2018 в 21:07
  • Как вариант да, можно хранить на сервере и в соответствие с этим типом данные расставлять. Другой вариант, типы input (которые вам нужны) описать в коде, и в зависимости от поступающих данных подставлять нужные. 27 янв 2018 в 6:46
  • А чем всё это тогда проще\отличается от того, чтобы сразу прописать все пустые переменные?
    – n.osennij
    27 янв 2018 в 8:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.