在VueJS中显示更改而无需刷新

Question

我在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();
}

Answer 1

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

使用该请求的响应，您可以更新 data.schedulesDisplayed 道具。

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

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

在此示例中，我使用了索引，但是您应该使用 sortedDays return的唯一属性。