[Vuejs]-Vue / Laravel – Axios post multiple field

1👍

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

ref link https://github.com/axios/axios

0👍

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)
            });
      }

You can retrieve your data from your controller $request->user_id,…,$request->email

Tip: if you post any object,you must JSON.stringify(your_json) them and in a response data from controller json_decode($your_json,true) or you need to modify your header file.

Always use ‘/your/uri‘ instead of /your/uri/ without trailing '/'

0👍

It now works. I’ll be posting my code just in case someone encounter the same hurdle. Than you very much to @kamlesh-paul and @md-amirozzaman

Component.vue

<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>

Controller.php

  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();
    }
  }

Leave a comment