Как из динамической формы Vue передать в Laravel данные в определенном порядке?

Question

[Виктор]

<template>
    <div>
        <div class="flex items-center mt-3">
            <h3>Translate post</h3>
        </div>
        <div class="flex mt-3">
            <div v-for="(content, i) in locales" :key="i">
                <div>content {{ i }}</div>
                <input v-model="translations.title[i]" type="text"/>
                <input v-model="translations.desc[i]" type="text"/>
            </div>
        </div>
        <div class="block text-center w-20">
            <a @click.prevent="store" href="#">Add</a>
        </div>
    </div>
</template>
<script>
import MainLayout from "@/Layouts/MainLayout.vue";
export default {
    name: "Index",
    props: [
        'locales',
        'default_locale',
    ],
    data() {
        return {
            translations:{
                    title: {},
                    desc: {}
            }
        }
    },
    methods: {
        store() {
            console.log(this.translations);
          this.$inertia.post(route('post.store'), {translations: this.translations})
        }
    },
    layout: MainLayout,
}
</script>
<style scoped></style>

Использую Laravel 10, Astrotomic/laravel-translatable
Сейчас при отправке получаю такой цикл:

"translations" =>  [
    "title" =>  [
        "ru" => "content ru"
        "en" => "content en"
     ]
  ]

но Astrotomic/laravel-translatable не принимает таких данных в таком порядке, нужно:

[
          'ru' => [
                'title' => 'content ru'
           ],
            'en' => [
               'title' => 'content en
           ]
     ]

Как можно в связке v-model и data() создать массив в нужном порядке или " пересобирать" массив в php?

Answer 1

[SymphoGraph]

store() {
      // Создайте новый объект для передачи на сервер
      const formattedTranslations = {};

      // Пройдитесь по всем локалям и создайте нужную структуру данных
      for (const locale of this.locales) {
        formattedTranslations[locale] = {
          title: this.translations.title[locale],
          desc: this.translations.desc[locale],
        };
      }
      console.log(formattedTranslations);
      // Отправьте данные на сервер
      this.$inertia.post(route('post.store'), { translations: formattedTranslations });
    }

Comments

[Виктор]

Спасибо.