javascript - VueJS Axios POST 在页面传递变量时返回 NULL

Question

我花了几个小时来理解这一点并重新检查 StackOverflow 的答案。复制粘贴也试过了，没用。

var app = new Vue({
  el: '#app',
  data: {
    jobtype_select: '',
    jobtype_list: [{
        id_JobType: 'JTY0001',
        name_JobType: 'Survey'
      },
      {
        id_JobType: 'JTY0002',
        name_JobType: 'Research'
      },
      {
        id_JobType: 'JTY0003',
        name_JobType: 'Maintenance'
      }
    ],
    woFormABCD: '',
    totallyRandom: 'Hello Heiayo'
  },

  methods: {
    recordTESTWo() {
      var form = new FormData();
      form.append('test', this.totallyRandom);
      axios.post('action.php',
          form
        )
        .then(function(response) {
          alert('Success!');
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }

});

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbab9a98cfee2f9e2fdfb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app'>
  <form method="post" action="action.php" @submit.capture='recordTESTWo'>
    <div class="">
      <label for="jobtype_id" class="control-label required"><strong>Choose Job Type</strong></label>
      <div v-for='jobtype in jobtype_list'>
        <label class="">
                            <input  type="radio" 
                                    id= 'jobtype_id'
                                    v-model= 'jobtype_select'
                                    :value="jobtype.id_JobType"
                                    name='jobtype_select' 
                                    > 
                            {{jobtype.name_JobType}}
                        </label>
      </div>
      <p> This is : {{jobtype_select}}</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
</div>

我想做的是尝试将 totallyRandom 值传递到下一页。这是action.php。

<?php
    session_start();
    //$data = json_decode(file_get_contents("php://input"), TRUE);
    printf("This is GET: \r\n");
    var_dump($_GET);
    printf("This is POST: \n");
    var_dump($_POST);
?>

我期望看到的， totallyRandom 的变量被传递给 action.php，这样我就可以在 action.php 页面上使用它。

我所看到的， 另外，当我转到 action.php 并执行 var_dump 时，它返回 NULL。单选按钮通过了，但这不是使用 Axios。更多详情可询问，

Answer 1

问题是你的<form>正在正常提交。这就是为什么您会看到 jobtype_select POST 参数而不是 test .

使用 .prevent 可以轻松解决此问题event modifier而不是.capture

<form @submit.prevent="recordTESTWo" ...

---

仅供引用，.capture是为了...

an event targeting an inner element is handled here before being handled by that element

这与 useCapture有关 addEventListener() 的参数而.prevent来电 preventDefault()关于此次事件。