Récupérer le résultat d'une requête mysql via vue.js
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:
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:
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:
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:
{"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:
1
2
3
4
5
6
7
8
9
| varapp=newVue({
el:'#myapp',
data:function () {
return {
users:"",
userid:0
}
} |
merci de l'aide
