Я пытаюсь обновить мой шаблон VueJS после запроса AJAX.
При первой загрузке страницы мои данные корректно обновляются и шаблон в порядке.
в моем шаблоне яУ меня есть этот раздел, который я хочу обновлять каждый раз, когда одна из задач изменилась:
<li v-for="(task,index) in tasks" @click="setCurrentTask(index)" :class="{'active' : currentTask.id == task.id}">
<span><i class="far fa-dot-circle"></i></span>{{ task.attributes.name }}
<a class="ui mini label" :class="task.attributes.state.attributes.name">{{ task.attributes.state.attributes.name }}</a><br>
<div class="details">
{{ currentTask.attributes.estimatedStart }}<br>
<i class="fas fa-play" @click="startTask(index)"></i>
</div>
</li>
Затем у меня есть запрос, который говорит об изменении состояния конкретной задачи, чтобы запустить ее, затем он возвращает задачус обновленным статусом:
export default {
name: "fdr",
data(){
return {
fdr:'',
tasks:'',
currentTask:null,
currentIndex:null,
}
},
methods: {
setCurrentTask: function (index) {
this.currentTask = this.tasks[index]
this.currentIndex = index;
if(this.currentTask.time != null){
$('.time').html( this.currentTask.timer.getTimeValues().toString());
$('#startDate').calendar();
}
},
startTask(index){
axios.get(this.$env_uri+'/api/task/'+this.tasks[index].id+"/start").then(function (resource) {
this.tasks[index] = resource.body
}.bind(this))
},
},
created() {
this.$http.get(this.$env_uri+'/api/fdr/' + this.$route.params.id)
.catch(response => {
return this.$router.push('/404')
})
.then(function (resource) {
this.fdr = resource.body
this.tasks = this.fdr.relationship.tasks
this.setCurrentTask(0);
}
);
},
Когда обновляется this.task, VueJs не обновляет мой шаблон для отображения нового статуса задачи.Я не могу найти способ сделать это ... у тебя есть идеи?