时间戳

首页 > 解决方案 > 在 VueJS 中显示更改而不刷新

javascript - 在 VueJS 中显示更改而不刷新

问题描述

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

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

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

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

更新配置文件.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();
}

标签： javascriptvue.jsrefresh

解决方案

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

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

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

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

为了这个示例，我使用了索引，但您应该使用sortedDays返回的唯一属性。

推荐阅读