Я пытаюсь создать таблицу, чтобы кто-то мог проверить людей, которых они хотят добавить в группу. До сих пор мне удалось извлечь их из БД с помощью PHP и отобразить их с помощью vue в HTML. Теперь я хотел бы назначить каждому идентификатору флажка адрес электронной почты студента, чтобы позже я смог отправить проверенных студентов обратно в PHP. Могут быть (намного) лучшие способы сделать это, но я очень новичок в этом.

Это мой текущий вывод: мой вывод

Мой HTML:

{amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;!-- Axios --{amp}gt; {amp}lt;script src="https://unpkg.com/axios/dist/axios.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="vue-app"{amp}gt; {amp}lt;table{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Select{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Firstname{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Lastname{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;tr v-for="(student, index) in students"{amp}gt; {amp}lt;input type="checkbox" id="{{student.email}}"{amp}gt; {amp}lt;td{amp}gt;{{student.firstname}}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{{student.lastname}}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; 
  var app = new Vue({ el: '#vue-app', data: { students: [] }, mounted: function () { axios.get('get_students_list.php') .then(response ={amp}gt; { this.students = response.data; console.log(students); }) .catch(error ={amp}gt; { 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-{amp}gt;prepare($query); $statement-{amp}gt;bindParam(':isteacher', $isteacher); $statement-{amp}gt;execute(); //gets row as associative array $users = $statement-{amp}gt;fetchAll(PDO::FETCH_ASSOC); $students = json_encode($users); echo $students; } catch (PDOException $error) { echo $error; } в try { include("db_connection.php"); $isteacher = false; $query = "SELECT firstname, lastname, email FROM persons WHERE isteacher = :isteacher"; $statement = $conn-{amp}gt;prepare($query); $statement-{amp}gt;bindParam(':isteacher', $isteacher); $statement-{amp}gt;execute(); //gets row as associative array $users = $statement-{amp}gt;fetchAll(PDO::FETCH_ASSOC); $students = json_encode($users); echo $students; } catch (PDOException $error) { echo $error; } 

Я попробовал указанное выше распределение идентификаторов, а также попытался создать флажок с javascript со следующим кодом (который тоже не работал, потому что для одного я не могу получить доступ к элементам vue оттуда):

  var checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.id = {{student.email}}; checkbox.checked = false; 

Дополнительные попытки:

 {amp}lt;input type="checkbox" v-bind:id="student.email"{amp}gt; 

и

 {amp}lt;input type="checkbox" :id="student.email"{amp}gt; 

Примечание. Это относится к последнему фрагменту, показанному в вопросе, поскольку ОП изменил вопрос после этого ответа.

Предполагая, что код на стороне сервера и выборка данных работают, вам не нужно создавать элемент input помощью другого скрипта, вы можете просто создать его, как вы делаете это с элементами {amp}lt;td{amp}gt; в цикле v-for :

 {amp}lt;tr v-for="(student, index) in students"{amp}gt; {amp}lt;input type="checkbox" :id="student.email" {amp}lt;td{amp}gt;{{student.email}}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{{student.lastname}}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; 

Обратите внимание на : (или v-bind: как подробный параметр) перед атрибутом id , это используется для привязки данных к атрибутам. См. Https://vuejs.org/v2/guide/syntax.html#Attributes.

Изменить: Добавлен рабочий пример: https://codesandbox.io/s/stack-overflow-q-59488184-x8m0w

Редактировать: вам также нужно привязать результат к экземпляру vue. this в. .then не указывает на ваш компонент. Используйте закрытие для этого:

  mounted() { let vm = this; axios .get("..." .then(response ={amp}gt; { vm.students = response.data.json.students; console.log(vm.students); })