vue.js - Vue.delete 或 $delete UI 未更新后

问题描述

这是我关于stackoverflow的第一个问题。所以，我尝试从数组中删除一个项目，我看到，在 Vue Dev Tools 中它被删除了，但 UI 没有更新。我成为这个数组作为来自 Laravel API 的响应，并像这样向 Vue 组件发送动态

...
<admin-panel :jurisdictions="{{ $jurisdictions }}"></admin-panel>
...

然后在我的 AdminComponent 中，我使用这样的道具重定向到 AdminHomeComponent

<template>
    <router-view :jurisdictions="jurisdictions"></router-view>
</template>
...
props: ['jurisdictions'],
...
created() {
   this.$router.push({ name: "AdminHomeComponent" }).catch(err => {});
},
...

在 AdminHomeComponent 我也有道具和路由器链接到另一个组件 JurisdictionsComponent 像这样

<template>
...
  <router-link :to="{name: 'JurisdictionsComponent'}"> Jurisdictions</router-link>
...
</template>
<script>
...
   props: ["jurisdictions"]
...
</script>

然后会很有趣，在 JurisdictionsComponent 中添加一个新的，或者编辑旧的它可以工作，有反应性，但如果我尝试删除一个，它仍然是反应性的，我在 Vue 开发工具中看到了这个，但我不能不明白，为什么UI不更新..

司法管辖区组件

<template>
    <div class="w-100">
        <div id="jurisdictionsContainer" ref="jurisdictionsContainer">
                <div class="panel-heading d-flex justify-content-between">
                    <h3 class="panel-title">Jurisdictions</h3>
                    <div class="pull-right">
                        <button @click.prevent="$modal.show('create-edit-jurisdiction', {'action' : 'create'})">
                            <i class="fas fa-plus-square"/> Create new
                        </button>
                    </div>
                </div>
                <table class="table table-hover mt-2 rounded" id="jurisdictions-table">
                    <thead class="thead-dark ">
                    <tr>
                        <th>Title</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id="jurisdictions-table-body">

在这里我做 v-for

                    <tr v-if="jurisdictions !== null" v-for="(jurisdiction, index) in this.jurisdictions" v-bind:key="jurisdiction.id"
                        class="result clickable-row"
                        @click="show($event, jurisdiction)">
                        <td class="title">
                            {{ jurisdiction.title }}
                        </td>
                        <td class="position-relative">
                            <button @click="$modal.show('create-edit-jurisdiction', {'jurisdiction': jurisdiction, 'index': index, 'action' : 'edit'})">
                                <div class="not-clickable">Edit</div>

这里显示一个删除模式窗口，使用可以删除或不删除，我的 ModalDeleteComponent 代码见下文

                            </button>
    <button @click="$modal.show('delete-jurisdiction', {'jurisdiction': jurisdiction, 'index': index})">
                                <div class="not-clickable">Delete</div>
                                <i class="fas fa-trash-alt not-clickable"/>
                            </button>
                    </tr>
                    </tbody>
                <delete-jurisdiction @onDeleted="onClickDelete"/>
                <create-edit-jurisdiction @create="onClickCreate" @edit="onClickEdit":errors="this.errors.createEdit"/>
            </div>
    </div>

</template>
<script>
    export default {
        name: "JurisdictionsComponent",
        props: ["jurisdictions"],
        data() {
            return {
                isAllSelected: false,
                errors: {
                    createEdit: {},
                    addEvent: {}
                },
            }
        },
        methods: {
            /**
             * Create a new jurisdiction
             *
             * @param data form
             */
            onClickCreate(data) {
                axios.post("/admin-dashboard/jurisdictions", data.form)
                .then(response => {
                    response.data.image === undefined ? response.data.image = null : response.data.image;
                    response.data.selected = false;
                    this.jurisdictions.push(response.data);
                    this.$modal.hide("create-edit-jurisdiction");
                    this.errors.createEdit = {}
                })
                .catch(errors => {
                    this.errors.createEdit = errors.response.data.errors;
                });

这里尝试删除权限，它从数据库中删除，从 Vue 开发工具中的道具中删除，而不是从 UI 中删除

            /**
             * Delete jurisdiction request
             *
             * @param index
             */
            onClickDelete(index) {
                axios.delete("/admin-dashboard/jurisdictions/" + this.jurisdictions[index].id)
                    .then(() => {
                        this.$delete(this.jurisdictions, index);
                        this.$modal.hide("delete-jurisdiction");
                    })
                    .catch(errors => {
                        console.log(errors)
                    });
            },
            /**
             * Edit a jurisdiction
             *
             * @param data form
             */
            onClickEdit(data) {
                axios.patch(this.jurisdictions[data.index].path, data.form)
                .then(response => {
                    this.$set(this.jurisdictions, data.index, response.data);
                    this.$modal.hide("create-edit-jurisdiction");
                    this.errors.createEdit = {}
                })
                .catch(errors => {
                    this.errors.createEdit = errors.response.data.errors;
                })
            },
    }
</script>

模态删除组件

<template>
    <modal name="delete-jurisdiction" @before-open="beforeOpen" height="200" @before-close="beforeClose">
        <div class="h-100">
            <div v-if="jurisdiction !== null" class="p-4 mt-2">
                <h3>Do you want really delete
                    <a :href="'/admin-dashboard/jurisdictions/'+jurisdiction.id"><strong>{{ jurisdiction.title }}</strong></a>
                    <span v-if="jurisdiction.events.length > 0">
                            with {{ jurisdiction.events.length }} {{ jurisdiction.events.length === 1 ? 'event' : "events"}}
                    </span>?
                </h3>
            </div>
            <div class="bg-dark d-flex justify-content-around p-2 position-absolute w-100" style="bottom: 0">
                <button class="btn btn-danger" @click="submitDelete">Delete</button>
                <button class="btn btn-secondary" @click="$modal.hide('delete-jurisdiction')">Cancel</button>
            </div>
        </div>
    </modal>
</template>

<script>
    export default {
        name: "ModalDeleteJurisdictionComponent",
        data() {
            return {
                jurisdiction: null,
                index: ""
            }
        },
        methods: {
            submitDelete() {
                this.$emit('onDeleted', this.index);
            },
            beforeOpen (event) {
                this.jurisdiction = event.params.jurisdiction;
                this.index = event.params.index;
            },
            beforeClose(event) {
                this.jurisdiction = null;
                this.index = "";
            }
        }
    }
</script>

我知道，我的问题太长了，但如果有人试图回答这个问题，我会很高兴））我愿意接受任何相反的问题。对不起我的英语不好

标签： vue.js

vue.js - Vue.delete 或 $delete UI 未更新后

问题描述

解决方案

推荐阅读