Как динамически извлечь данные из объекта vue для POST-запроса к бэкэнду?

Question

У меня есть vue объект со всеми этими геттерами и сеттерами, вот скриншот из console.log:

Структура фактических данных (не-1023 *) выглядит следующим образом:

       {
          Internal_key: "TESTKEY_1",
          extensiontable_itc: {
            description_itc: "EXTENSION_ITC_1_1",
            description_itc2: "EXTENSION_ITC_1_2",
          },
          extensiontable_sysops: {
            description_sysops: "EXTENSION_SYSOPS_1"
          }
        }

Данные могут выглядеть иначе в других случаях использования. На внешнем объекте может быть больше или меньше пар ключ-значение, и ключи могут также называться по-разному. То же самое касается вложенных объектов и их содержимого.

Есть ли какой-нибудь удобный способ извлечь эти данные в простой JS объект? Если нет, то как мне лучше всего использовать объект vue для извлечения данных «вручную»? Запрос AJAX должен выполняться запросом ax ios, если это также важно.

РЕДАКТИРОВАТЬ: Вот соответствующие данные в vue:

data() {
  return {
    editingRecord: {
        original: null,
        copy: null
      }
  }
}

Во время моего выполнения программы и editingRecord.orginal, и editingRecord.copy получают данные из формы ввода. copy устанавливает свои данные в исходное, если пользователь нажимает кнопку сохранения / отправки. Затем я хочу взять данные из editingRecord.original с их ключами и значениями и отправить их на сервер с помощью запроса AJAX.

Answer 1

Хорошо, я нашел решение.

  let vueObject = Object.entries(this.editingRecord.original)

  for(const[key, value] of vueObject){
    if(typeof value == 'object' && value !== null){
      for(const [nestedKey, nestedValue] of Object.entries(value)){
        result[nestedKey] = nestedValue
      }
    }else{
      result[key] = value
    }
  }
  console.log("resultObject is", result)

Таким образом вы можете перебирать все свойства, включая свойства вложенных объектов, и переназначать ключ и значение в одномерный массив fre sh.

Answer 2

Лучше не смешивать jQuery с Vue, так что вот как вы это сделаете, используя Ax ios https://github.com/axios/axios

methods: {
    submit() {
      const body = this.editingRecord.original

      // make changes to body

      axios.post( "backend_url", body )
      .then(function(resp){
        console.log(resp)
      });

    }
  }