У меня есть следующий компонент (шаблон):
<script type="text/x-template" id="student-list">
<div v-if="studentList">
<table>
<tr v-for="student in studentList">
<td>{{student.studentId}}</td>
<td>{{student.studentName}}</td>
</tr>
</table>
</div>
</script>
Для которого я получаю данные, подобные этой, с помощью запроса ajax.Идея состоит в том, что в «созданный» момент будет запрос, затем свойство StudentList компонента будет обновляться в тот момент, когда будут получены данные, и оно также должно обновляться в представлении.Пока ничего не происходит.В консоли он показывает правильные данные, но не обновляет представление.
var StudentList = Vue.component("student-list", {
template: "#student-list",
data: function() {
return {
studentList: null,
...
}
},
created: function() {
var self = this;
this.ajaxRequest("get-student-list", {data: ''}, (studentList) => {
self.studentList = JSON.parse(studentList).message;
console.log(self.studentList);
// shows the proper fetched data - but the studentList on component doesn't update
// self.studentList, as shown in console, looks like this:
//
// [{"studentId":"34732847328463","studentName":"Marian V. Johnson"},{"studentId":"3473584732463","studentName":"John A. Marian"},{"studentId":"347328341463","studentName":"Martin C. Johnson"}]
});
}
self.studentList показывает данные, которые должны отображаться в представлении, но в самом представлении ничего не отображается.Я следовал руководству по извлечению данных из Vue docs, похоже, это то же самое, что я делаю - но оно не работает.
В чем может быть проблема?