如何使用 axios 和 vue 将多个表单无线电输入的对象数组发布到 PHP？

Question

我的网络应用中有一个多申请人表单，其中包含一个单选按钮选择器部分。我设法修复了每个新申请表中的单选按钮，但现在在将数据发布到 PHP 和 MySQL 数据库时遇到了问题。我的问题是如何将对象数组发布到 PHP 并使用 axios 将其保存到 MySQL 数据库？

我尝试查找有关该主题的教程，甚至查找其他问题，但没有找到答案。

let app = new Vue({
  el: "#app",
  data: {
    buttons: [{
      val: null
    }]
  },
  methods: {
    addNewRadios(evt) {
      evt.preventDefault();
      this.buttons.push({
        val: null
      });
      //console.debug(this.buttons);
    },
    onSubmit(evt) {
      evt.preventDefault();
      const formData = app.toFormData(app.buttons);
      console.log(formData);
      //What to do here???
    },
    toFormData(obj) {
      let formData = new FormData();
      for (var key in obj) {
        formData.append(key, obj[key]);
      }
      return formData;
    }
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<h1>Multiple radio buttons VueJS</h1>
<div id="app">
  <div class="radio">
    <form @submit='onSubmit' method="post">
      <div v-for="(button, index) in buttons">
        <b>Index {{ index }}:</b>
        <label :for="'rButton-' + index">option 1</label>
        <input type="radio" :name="'rButton-' + index" value="value-1" v-model="button.val">
        <label :for="'rButton-' + index">option 2</label>
        <input type="radio" :name="'rButton-' + index" value="value-2" v-model="button.val">
      </div>
      <br>
      <button @click="addNewRadios">Add radios</button>
      <button type="submit">Submit</button>
    </form>
  </div>

  <div>

  </div>
</div>

Answer 1

在这里，我对您的代码进行了一些修改。使用按钮值构建表单数据，然后使用 axios 发布数据，

let app = new Vue({
    el: "#app",
    data: {
        buttons: [{
            val: null
        }]
    },
    methods: {
        addNewRadios(evt) {
            evt.preventDefault();
            this.buttons.push({
                val: null
            });
            //console.debug(this.buttons);
        },
        onSubmit(evt) {
            evt.preventDefault();
            const formData = app.toFormData(app.buttons);
            // What to do here???

            // post data to your backend server.
            axios({
                method: 'post',
                url: 'http://example.com/my-url',
                data: formData,
            }).then(response => {
                console.log('Response:', response);
                // upon successful post request, you will see the response from the backend server here.
            }).catch(err => {
                console.log('Error:', err);
                // and in case of any error at the backend server.
            });
        },
        toFormData(obj) {
            let formData = new FormData();
            for (let key in obj) {
                formData.append(key, obj[key].val); // appending the button `val` property here, instead of the entire object.
            }
            return formData;
        }
    }
});

然后在后端服务器中，处理发布数据。您应该在那里收到您发送的按钮值数组。

我希望这会有所帮助。