Vue / Laravel-Axios post множественное поле

Vue / Laravel-Axios post множественное поле

06.01.2020 08:52:28 Просмотров 30 Источник

Я создал компонент, который может добавлять дополнительные поля нажатием кнопки. Я не знаю, как бы я отправил это в базу данных с axios.postи контроллер laravel. Я смог добиться этого в прошлом с помощью jquery и pure laravel, но я не знаю, как реализовать это в vue и axios.

Деталь.вю

<template>
  <v-app>
  <table class="table">
    <thead>
      <tr>
        <td><strong>Title</strong></td>
        <td><strong>Description</strong></td>
        <td><strong>File</strong></td>
        <td></td>
      </tr>
    </thead>  
    <tbody>
      <tr v-for="(row, index) in rows" :key="row.id">
        <td><v-text-field outlined v-model="row.title" /></td>
        <td><v-text-field outlined v-model="row.description" /></td>
        <td>
          <label class="fileContainer">
          <input type="file" @change="setFilename($event, row)" :id="index">
          </label>
        </td>
        <td><a @click="removeElement(index);" style="cursor: pointer">X</a></td>
      </tr>
    </tbody>
  </table>
    <div>
      <v-btn @click="addRow()">Add row</v-btn>
      <v-btn class="success" @click="save()">Save</v-btn>
      <pre>{{ rows | json}}</pre>
    </div>
  </v-app>
</template>

<script>
  export default {
    data: ()=> ({
      rows: []
    }),
    methods: {
      addRow() {
        var elem = document.createElement('tr');
        this.rows.push({
          title: "",
          description: "",
          file: {
            name: 'Choose File'
          }
        });
      },
      removeElement(index) {
          this.rows.splice(index, 1);
      },
      setFilename(event, row) {
        var file = event.target.files[0];
        row.file = file
      },
      save() {
        // axios.post
      }
    }
  }
</script>

Контроллер.РНР

 public function store(Request $request) 
{
  // store function
}
У вопроса есть решение - Посмотреть?

Ответы - Vue / Laravel-Axios post множественное поле / Vue / Laravel - Axios post multiple field

Kamlesh Paul

06.01.2020 08:56:34

 save() {
 let data = this.rows
          axios
            .post("Url", {
                data
            })
            .then((res) => {
               console.log(res);
            })
            .catch((err) => {
                console.log(err)
            });
      }

Реф ссылка https://github.com/axios/axios

https://stackoverflow.com/questions/59607292/vue-laravel-axios-post-multiple-field/59607321#comment105378427_59607321
Большое Вам за это спасибо. Сейчас я получаю сообщение о внутренней ошибке 500, которая, по моему мнению, является ошибкой в контроллере. После поиска я попробовал этот код, и мне кажется, что он неверен. общественные функции магазина(запрос $запроса) { $средства = json_decode($запрос->данные, истина); по каждому элементу( $продукты как $продукт ) { EmployeeObjective::создать([ 'kpi_info' => $продукта['название'], 'kpa_info' => $продукта['описание'], ]); } }
https://stackoverflow.com/questions/59607292/vue-laravel-axios-post-multiple-field/59607321#comment105378452_59607321
я дал вам решение axios не ваше решение контроллера вы можете dd () какой запрос вы получаете, то u может написать код соответственно
Md. Amirozzaman

06.01.2020 09:41:55

save() {
       axios
            .post("/your/uri", {
                user_id: 1,
                user_name:'jhone doe',
                email:'test@test.com' 
            })
            .then(response => {
               console.log(response);
            })
            .catch(error => {
                console.log(error)
            });
      }

Вы можете получить свои данные из контроллера $request->user_id,..., $request->email

Совет: если вы публикуете какой-либо object,вы должны JSON.stringify(your_json)их и в ответ данные от контроллера json_decode($your_json,true)или вам нужно изменить свой заголовочный файл.

Всегда используйте '/your/uriвместо /your/uri/ без символа '/'

https://stackoverflow.com/questions/59607292/vue-laravel-axios-post-multiple-field/59607739#comment105444880_59607739
пожалуйста, сдавайтесь-голосуйте, и если вы считаете,что это ваш ответ, пожалуйста, отметьте его как ответ - он будет оценен.
Jim E Russel

07.01.2020 03:59:17

Теперь это работает. Я буду публиковать свой код на случай, если кто-то столкнется с таким же препятствием. Чем вам очень нравится @kamlesh-paul и @md-amirozzaman

Деталь.вю

<script>
  export default {
    data: ()=> ({
      rows: [],
    }),

    methods: {
      addRow() {
        this.rows.push({
          corporate_objective_id: '',
          kpa: '',
          kpi: '',
          weight: '',
          score: '',
          equal: '',
          file: {
            name: 'Choose File'
          }
        });
      },
      removeElement(index) {
          this.rows.splice(index, 1);
      },
      setFilename(event, row) {
        var file = event.target.files[0];
        row.file = file
      },
      save() {
        const postData = {
          data: this.rows
        }
        console.log(postData)
        axios
        .post('/api/employee-objective', {postData})
        .then(res => { console.log(res) })
        .catch(err => { console.log(err) });
      }
    }
  }
</script>

Контроллер.РНР

  public function store(Request $request) {
    foreach($request->data as $data) {
      $container = EmployeeObjective::updateOrCreate([
        'kpa_info' => $data['kpa'],
        'kpi_info' => $data['kpi'],
        'kpa_weight' => $data['weight'],
        'kpa_score_1' => $data['score'],
        'kpa_equal' => $data['equal'],
       ]);
      $container->save();
    }
  }
Закрыть X