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

Как можно сделать так, чтобы массив `translations` был представлен в нужном порядке или пересобрать его на сервере, используя связку `v-model` и `data()` в Laravel 10 с пакетом Astrotomic/laravel-translatable?
  • 4 октября 2023 г. 17:07
Ответы на вопрос 2
Чтобы передать данные в определенном порядке из динамической формы Vue в Laravel, вам нужно следовать следующим шагам:

Шаг 1: Создайте форму внутри компонента Vue с использованием `v-model` для связи с данными.

```html
<template>
  <form @submit="handleSubmit">
    <div v-for="(translation, index) in translations" :key="index">
      <input v-model="translation.title" type="text" />
      <input v-model="translation.description" type="text" />
      <!-- Добавьте другие поля, если необходимо -->
    </div>

    <button type="submit">Отправить</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      translations: [],
    };
  },
  methods: {
    handleSubmit() {
      // Отправка данных на сервер Laravel
      // ...
    },
  },
};
</script>
```

Шаг 2: Внутри метода `handleSubmit` компонента Vue вы можете отправить данные на сервер Laravel используя AJAX-запрос или другим способом.

```javascript
handleSubmit() {
  // Отправка данных на сервер Laravel
  // Можете использовать axios или Fetch API для отправки AJAX-запроса
  axios.post('/translations', { translations: this.translations })
    .then(response => {
      // Обработка ответа от сервера
    })
    .catch(error => {
      // Обработка ошибок
    });
},
```

Шаг 3: В Laravel контроллере вы можете обработать данные, перебрать их и сохранить в нужном порядке или пересобрать массив.

```php
use Astrotomic\Translatable\Translatable;

// ...

public function store(Request $request)
{
    $translations = $request->input('translations');

    $savedTranslations = [];

    foreach ($translations as $translation) {
        // Ваша логика сохранения и обработки данных
        // Например, вы можете использовать Eloquent модель для сохранения данных в базу данных

        $model = new YourModel();
        $model->title = $translation['title'];
        $model->description = $translation['description'];
        // ...

        $model->save();

        // Добавьте сохраненную модель в массив с сохраненными переводами
        $savedTranslations[] = $model;
    }

    return response()->json(['translations' => $savedTranslations]);
}
```

В этом примере `YourModel` - это ваша модель, которую вы используете для сохранения данных в базу данных. Вы можете настроить и адаптировать код в соответствии с вашими потребностями и используемой структурой данных.

Это основной подход, который позволяет передавать данные в определенном порядке из динамической формы Vue в Laravel и сохранять их в нужном формате.
Сохранить() {
      // Создайте пустой объект для передачи на сервер
      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 });
    }
Похожие вопросы