Question

我创建了一个可以通过按下按钮添加其他字段的组件。我不知道如何使用axios.post和laravel控制器将其提交到数据库中。过去我可以通过使用jquery和纯laravel来实现它，但是我很困惑如何在vue和axios中实现它。

Component.vue

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

Controller.php

 public function store(Request $request) 
{
  // store function
}

Answer 1

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

参考链接https://github.com/axios/axios

Answer 2

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) 并在控制器 {{1 }} ，或者您需要修改头文件。

始终使用' json_decode($your_json,true) '而不是 /your/uri ，而不尾随 /your/uri/

Vue / Laravel-Axios发布多个字段

2 个答案: