ajax - ajax返回后vuejs刷新模板
问题描述
我正在尝试在 AJAX 请求后刷新我的 VueJS 模板。
在第一次加载的页面上,我的数据已正确更新,模板没问题。
在我的模板中,我有这个部分,每次任务之一发生变化时我都想更新:
<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 不会刷新我的模板以显示任务的新状态。我找不到办法……你有什么想法吗?
解决方案
首先完全误解了这个问题。
问题是更新更新数组中的索引。这是必须要做的事情,Array.$set(index, value)
因为 Vue 无法判断数组中的索引是否已更改。
You can read more about it here
推荐阅读
- scala - Spark 数据集写入镶木地板文件需要很长时间
- javascript - 为什么 JavaScript 的 fetch() 不需要检查状态码 304?
- floor - 设计一个不按比例的平面图?
- typescript - 从对象输入生成动态属性
- python - 我收到错误和回溯尝试发送带有硒的whatsapp
- django - Django中的URL路径查找器-当它不断将我重定向到主视图时有什么解决方法吗?
- node.js - 发布路线不适用于用户注册
- r - 根据我的数据框中现有列的值在 R 中创建一个新列
- uwp - UWP 坏图像异常
- ruby-on-rails - 如何在Rails中使用AND而不是OR来查询has_and_belongs_to?