首页 > 解决方案 > 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 不会刷新我的模板以显示任务的新状态。我找不到办法……你有什么想法吗?

标签: ajaxvue.js

解决方案


首先完全误解了这个问题。

问题是更新更新数组中的索引。这是必须要做的事情,Array.$set(index, value)因为 Vue 无法判断数组中的索引是否已更改。

You can read more about it here


推荐阅读