Vueapp AJAX阵列不起作用

Question

Hey everyone I have a vueapp that makes an ajax call that looks like this:

$.ajax({
  url: 'addDisplayBackend.php',
  dataType: 'json',
  type: 'post',
  contentType: 'application/json',
  dataType: 'json',
  data: jsonString,
    error: function(data){
      alert('error');
    console.log(data);
    },
  success: function(data){
    console.log(data);
      alert('success');
      this.nameexists=data.nameexists;
      if(this.nameexists==false){
    console.log(data);
    this.displays=data.displays;
    this.hideAddDisplayForm();
    }
  }.bind(this)
});

on the addDisplay backend page I do a number of things but I do I select statement that looks like this:

$selectdisplaysquery="SELECT * FROM display WHERE userId='$userid'";
$displaysresult=mysqli_query($mysqli, $selectdisplaysquery);
while($row=mysqli_fetch_assoc($displaysresult)){
 $data['displays']=$row;
}
echo json_encode($data);

Why doesn't this work? Why cant I have $data['displays'] return an array of all the objects in the database? For some odd reason I just get one row. Any help would be awesome

Answer 1

keep the vueapp the same but change the backend page to be

$selectdisplaysquery="SELECT * FROM display WHERE userId='$userid'";
    $displaysresult=mysqli_query($mysqli, $selectdisplaysquery);
    foreach($displaysresult as $display){
        $displaysarray[]=$display;
    }
    $data['displays']=$displaysarray;