在 VueJS 中显示更改而不刷新答案

【问题标题】：Showing changes without refreshing in VueJS在 VueJS 中显示更改而不刷新
【发布时间】：2018-08-16 08:26:57
【问题描述】：

我是 VueJS 的新手，但仍然无法控制它的大部分功能，

我正在尝试更新或删除窗口中的某些内容，而无需刷新即可查看更改...请问我该怎么做？

我的功能在我的控制器中完美运行，只需要解决看到变化的问题。

如果有帮助，我在这里发布我的代码......非常感谢！

UpdateProfile.vue：

<div class="field">
            <label class="label">Schedules</label>
            <!--Edit and Delete Schedules-->
            <div v-for="schedule in sortedDays(data.schedulesDisplayed)" class="control">
                <div class="container">
                    <div class="field">
                        <label class="label">Week Day: {{schedule.week_day}}</label>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                Opening Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.opening_time">
                            </div>

                        </div>
                        <div class="col">
                            <div class="row">
                                Closing Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.closing_time">
                            </div>

                        </div>
                    </div>
                    <div class="field">
                        <div class="buttons is-left">
                            <div class="button is-info" @click="updatePubSchedule(schedule)">
                                <span class="icon"><i class="fas fa-save fa-lg"></i></span>
                                <span>Save</span>
                            </div>
                            <div class="button is-danger" @click="deletePubSchedule(schedule)">
                                <span class="icon"><i class="far fa-trash-alt"></i></span>
                                <span>Delete Schedule</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

updatePubSchedule(schedule){
            var instance = this;

            this.api.put('/pubschedules/update/' + this.data.id, schedule).then(response => {
                console.log(schedule);
                //data = response.data;
                instance = response.data;
            });
        },

 deletePubSchedule(schedule){
            var instance = this;

            this.api.delete('/pubschedules/delete/' + this.data.id, schedule).then(response => {
                //data = response.data;
                instance = response.data;
            });
        },

在我的控制器中：

/**
 * @param Pub $pub
 */
public function updatePubSchedule(Pub $pub)
{
    //json_die(request()->all());

    Schedule::where([
                        ['pub_id','=', $pub->id],
                        ['week_day' ,'=', request()->get('week_day')]
    ])->update(request()->all());
}

/**
 * @param Pub $pub
 */
public function deletePubSchedule(Pub $pub)
{
    Schedule::where([
        ['pub_id','=', $pub->id],
        ['week_day' ,'=', request()->get('week_day')]
    ])->delete();
}

【问题讨论】：

标签： javascript vue.js refresh

【解决方案1】：

我不知道您如何获取初始数据，但您可以在更新/删除初始数据后发出 GET 请求，从 laravel 获取新数据。

根据该请求的响应，您可以更新您的 data.schedulesDisplayed 属性。

重要！你需要在使用v-for这样渲染的div中设置:key属性

<div v-for="(schedule, index) in sortedDays(data.schedulesDisplayed)" :key="index" class="control">

为了这个示例，我使用了 index，但您应该使用 sortedDays return 的唯一属性。

【讨论】：