Question

我正在尝试在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不会刷新我的模板以显示任务的新状态。我找不到办法...您有任何想法吗？

Answer 1

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

问题是更新更新数组中的索引。这是Array.$set(index, value)必须完成的工作，因为Vue无法判断数组中的索引是否已更改。

您可以详细了解here

Ajax返回后vuejs刷新模板

1 个答案: