Passage de <input v-for> à php

Question

J'essaie de faire un scanner de codes QR en utilisant Vue.js et instascan. J'ai déjà fait la partie numérisation. Maintenant, je suis coincé dans ce processus où je dois récupérer les données de MySQL en utilisant une requête Ajax. Je ne parviens pas à récupérer les données du formulaire de saisie.

Voici mon code HTML :

    <form id="cont_disp" method="post">
    <label class="disptext" style="margin-left: 41%;">Load user credits</label>

    <div class="form-group" id="app">
        <input v-for="scan in scans" :key="scan.date" hidden :title="scan.content" class="form-control" id="qr_user" name="qr_user" placeholder="Scan User QR Code":value="scan.content" style="width: 15%; font-size: 20px; left: 44%; position: absolute; top: 30%; border: 0; background: transparent;">
    </div>
    <div class="video-container">
        <video id="preview"></video>
    </div>

    <div class="content-display">

            <label class="disptext" style="font-size: 20px;">Username: </label>
            <input type="button" name="" class="login" value="Search" style="margin-left: 70%; font-size: 20px;" id="qr_search">
            <br /><br />
            <label class="disptext" style="font-size: 20px;">Current Balance: </label><input type="text" class="disptext" id="userbal" style="font-size: 20px; left: 44%;"><br /><br />
            <label class="disptext" style="font-size: 20px;">Enter credit amount: </label><input type="number" name="loadcred" id="loadcred" style="margin-left: 28%;" required placeholder="Credit amount"><br /><br />
            <input type="submit" name="credsub" id="credsub" value="Load Credits" class="login" style="width: 50%; margin-top: 3%;">

    </div>
</form>

Et voici la requête php.

   include 'dbcon.php';
   $qr_user = $_POST['qr_user'];
   $query = mysqli_query($con, "SELECT username, credits FROM useracc WHERE username='$qr_user'");
   $row = mysqli_fetch_array($query);
   echo json_encode($row);

Et la requête Ajax :

  $("#qr_search").click(function(){
    var qr_user = $("#qr_user").val();
    $.ajax({
        type: "post",
        url: "../Capstone/qrdata.php",
        data: formData = {username:qr_user},
        success: function(data){
            // can't seem to do anything here since I can't fetch any data from php
        }
    });
});

Answer 1

Changez ça :

$qr_user = $_POST['qr_user'];

à :

$qr_user = $_POST['username'];

pour résoudre le problème car le nom ne correspond pas.