I'm trying to create a table so that someone can check the people they want to add to a group. So far I've managed to retrieve them from the DB with PHP and display them with vue in HTML. Now I would like to assign each checkbox ID with the email of the student, so i can send the checked students back to PHP later. There may be (a lot) better ways to do this, but I'm very new to this.
This is my current output: My Output
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<table>
<thead>
<tr>
<th>Select</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students">
<td><input type="checkbox" id="></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
var app = new Vue({
el: '#vue-app',
data: {
students: []
},
mounted: function () {
axios.get('get_students_list.php')
.then(response => {
this.students = response.data;
console.log(students);
})
.catch(error => {
console.log(error);
});
}
})
get_students_list.php:
try {
include("db_connection.php");
$isteacher = false;
$query = "SELECT firstname, lastname, email FROM persons WHERE isteacher = :isteacher";
$statement = $conn->prepare($query);
$statement->bindParam(':isteacher', $isteacher);
$statement->execute();
//gets row as associative array
$users = $statement->fetchAll(PDO::FETCH_ASSOC);
$students = json_encode($users);
echo $students;
} catch (PDOException $error) {
echo $error;
}
I've tried the above id allocation and I also tried creating a checkbox with javascript with the following code (which didn't work either, because for one i can't acces the vue elements from there):
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = ;
checkbox.checked = false;
Aucun commentaire:
Enregistrer un commentaire