Блог

Мне трудно выбраться из бесконечного круга получения / настройки данных. Я уверен, что есть очень очевидное решение, которое я по какой-то причине полностью игнорирую.

Когда пользователь входит в систему, я получаю / настраиваю их организацию на хранилище vuex. Все работает отлично.

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

Вот одно поле из моей формы, чтобы показать, что я делаю:

Пример HTML:

 <input type="text" id="postalCode" placeholder="45321" 
    :class="{'border-red-500': !$v.organization.zip.required}"
    v-model="organization.zip"
    v-mask="'#####'"
/>
  

Вот мой <script> блок, показывающий, как я получаю данные своей организации.

 computed: {
    organization() {
      return this.$store.getters["organization/organization"];
    },
    ...
},
data: () => ({
    errors: false,
}),
validations: {
    organization: {
        name: { required },
        email: { required, email },
        phone: { required },
        streetAddress1: { required },
        city: { required },
        state: { required },
        zip: { required, minLength: minLength(5) },
      },
},
methods: {
    async handleSaveOrganization() {
        this.$v.$touch();

        if (this.$v.$invalid) {
            this.errors = true;
        } else {
            try {
                await this.$store.dispatch("organization/updateOrganization", this.organization)
                .then((response) => {
                    if (response.status === 200) {
                    console.log("organization was updated!");
                }
            });
        } catch (error) {
          console.log('Error!');
        }
      }
    },
},

  

Я использую vuelidate в качестве библиотеки проверки. Поля в моем validations объекте — это поля в моей форме. Проверка также работает. Проблема, с которой я сталкиваюсь, заключается в отправке данных. Я хочу отправлять только поля формы, а не весь объект, как сейчас.

Когда я извлекаю организацию из хранилища, она содержит все атрибуты id , включая uuid , createdAt и т.д. Я не хочу включать их в свои данные формы.

Я использую NestJS для своего бэкэнда, и в моих правилах проверки я не разрешаю uuid отправку на сервер. Все работает отлично — я неправильно отправляю данные.

Вместо этого:

 {
   id: 122,
   name: "Example",
   email: "example@email.com",
   uuid: 123-44566-3454
} 
  

Я хочу отправлять только те поля, которые перечислены в моем объекте проверки.
Например:

 {
   name: "Example Updated!",
   email: "example@email.com"
} 
  

Я пробовал различные способы уничтожения или удаления атрибутов. Каждый из них кажется действительно отрывочным.

Как я могу надежно отправить свою форму без необходимости делать с ней кучу, казалось бы, хакерских вещей? Спасибо за любые предложения!

ТЕКУЩЕЕ РЕШЕНИЕ

Спасибо, gijoe за ваше предложение. Вот что я придумал для всех, кто может столкнуться с этим.

Когда я отправляю (делаю PATCH запрос) на обновление своей организации, я отправляю событие отправки в хранилище vuex моей организации.

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

 updateOrganization(organization) {
    const token = Cookie.get("accessToken");
    const {
      name,
      streetAddress1,
      streetAddress2,
      city,
      state,
      zip,
      email,
      phone,
    } = organization;
    const obj = {};

    obj.name = name;
    obj.streetAddress1 = streetAddress1;
    obj.streetAddress2 = streetAddress2;
    obj.city = city;
    obj.state = state;
    obj.zip = zip;
    obj.email = email;
    obj.phone = phone;

    return client
      .patch(`/v1/organizations/${organization.id}`, obj, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((response) => {
        return response;
      })
      .catch(function (error) {
        console.log("OrganizationService.updateOrganization error: ", error);

        return Promise.reject(error);
      });
  },
  

organization Аргумент, который передается (из хранилища vuex), по-прежнему имеет все свойства (включая id, uuid и т. Д.). Мне нужно было иметь возможность получить идентификатор, чтобы сделать правильный PATCH запрос. Оттуда я создаю временный объект и отправляю его. Надеюсь, это поможет кому-то еще!

Один из вариантов — выполнить следующее: объявить объект без атрибутов, например.x.

 let org = {};
  

а затем массив со всеми атрибутами, которые вы хотите скопировать
, например.

  var that = this;
 ['name','email'].forEach(prop=>org[prop]=that.organization[prop]);
  

а затем отправьте объект «org» вместо this.organization

второй вариант — уничтожить атрибуты, например.x.

 let {name, address} = this.organization;
  

а затем инициализировать из них новый объект

  let org = {name,address}