Bonjour,

J'essaye de reproduire un tutorial sur comment afficher les donnée d'une requete mysql via un coposant vue.js mais ça ne marche pas

voici le html et le javascript

( bien sur dans le head j'ai les appels au biblis vue.js et axios.js )

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<divid='myapp'>
 
<!-- Select All records -->
<inputtype='button' @click='allRecords()'value='Select All users'>
<br><br>
 
<!-- Select record by ID -->
<inputtype='text'v-model='userid'placeholder="Enter Userid between 1 - 24">
<inputtype='button' @click='recordByID()'value='Select user by ID'>
<br><br>
 
<!-- List records -->
<tableborder='1'width='100%'style='border-collapse: collapse;'>
<tr>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
 
<trv-for='user in users'>
<td>{{ user.username }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
 
</div>

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
varapp=newVue({
el:'#myapp',
data:function () {
return {
users:"",
userid:0
                    }
                  }
                ,               
methods: {
allRecords:function(){
 
axios.get('http://localhost/vue-js-mysql-2/ajaxfile.php')
                        .then(function (response) {
app.users=response.data;
                        })
                        .catch(function (error) {
console.log(error);
                        });
                    },
recordByID:function(){
if(this.userid>0){
 
axios.get('http://localhost/vue-js-mysql-2/ajaxfile.php', {
params: {
userid:this.userid
                                }
                            })
                            .then(function (response) {
app.users=response.data;
                            })
                            .catch(function (error) {
console.log(error);
                            });
                        }
 
                    }
                }
            })
 
</script>

le php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
include"config.php";
 
$condition  = "1";
if(isset($_GET['userid'])){
$condition  = " id=".$_GET['userid'];
}
// Tous les utilisateurs de notre table
$utils = $con->query('SELECT*FROM `users` WHERE'.$condition);
 
// Parcours des résultats en mode PDO::FETCH_ASSOC
while ($response = $utils->fetch(PDO::FETCH_ASSOC)) {
// print_r($response);
$response = json_encode($response);
echo$response;
}
exit;

la requête sql via json donne en sortie

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
{"id":"1","username":"yssyogesh","name":"Yogesh singh","email":"yssyogesh_gmail.com"}{"id":"2","username":"sonarika","name":"Sonarika","email":"sonarika_gmail.com"}{"id":"3","username":"vishal","name":"Vishal Sahu","email":"vishal_gmail.com"}{"id":"4","username":"mayank","name":"Mayank","email":"mayank_yahoo.com"}{"id":"5","username":"vijay","name":"Vijay","email":"vijayec_gmai.com"}{"id":"6","username":"jiten","name":"Jiten singh","email":"jiten93_gmail.com"}{"id":"7","username":"rahul","name":"Rahul singh","email":"rahul_gmail.com"}{"id":"8","username":"shreya","name":"Shreya","email":"shreya_yahoo.com"}{"id":"9","username":"mohit","name":"Mohit","email":"mohit_gmail.com"}{"id":"10","username":"rohit","name":"Rohit singh","email":"rohit_gmail.com"}{"id":"11","username":"abhilash","name":"Abhilash ","email":"abhilash_gmail.com"}

mais le résultat donne l'affichage du tableau mais avec des lignes vides.

j'aimerais récupérer le résultat de la requête mysql dans le composant data de vue.js

ici

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
varapp=newVue({
el:'#myapp',
data:function () {
return {
users:"",
 
userid:0
                    }
                  }

merci de l'aide