Vue.js Vue.delete或$delete之后未更新UI

这是我关于stackoverflow的第一个问题。 所以，我尝试从数组中删除一个项目，我看到，在Vue开发工具中它被删除了，但UI没有更新。 我将此阵列作为来自LaravelAPI的响应，并像这样将动态发送到Vue组件

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

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

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

。。。
与{{directory.events.length}{{directory.events.length==1？'event'：“events”}
?
删除
取消
导出默认值{
名称：“ModaldeleteJustictionComponent”，
数据（）{
返回{
管辖权：无效，
索引：“
}
},
方法：{
submitDelete（）{
此.emit（'onDeleted'，此.index）；
},
开放前（活动）{
this.judiction=event.params.judiction；
this.index=event.params.index；
},
关闭前（事件）{
此值为空；
该指数=”；
}
}
}

我知道，我的问题太长了，但如果有人试图回答这个问题，我会非常高兴的

---

我愿意接受任何相反的问题。对不起我的英语

所以，谢谢你的提示。Ich已在辖区内重命名为DataJudictions，并在

created（）{this.datajudictions=this.judictions}

中初始化。首先，我希望避免组件中的数据重复，只使用

道具

，但它仍然有效。非常感谢

您正在添加到

辖区

，这是一个道具

this.jurisdictions.push(response.data);

但是，您应该更新父零部件中的道具，以触发道具更改并重新渲染，或者将道具指定给零部件数据作为初始值，然后更新数据

可以使用

$emit

或使用

Vuex

更改父组件中的道具

在本地分配数据只需要一个不同的值名

this.localJurisdictions = this.jurisdictions

对于更新，请使用此新数据值。（在模板中相应使用。）

---

欢迎来到SO。你应该缩小你的问题和代码的范围，否则没有人会帮助你。然而，辖区来自于道具，如果你想和UI一起更新，它应该是数据的一部分。谢谢你的回答。你的意思是

data（）{return{judictionary:this.judictionary}}

的一部分，我已经尝试过了，但是Vue说：“数据属性“judictionary”已经声明为prop。请改用prop默认值”。我感到惊讶的是，当我编辑或添加UI更新时，很高兴它起到了作用。仍然发布了一个更详细的答案，我之前忘记提交了。

                            </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;
                });

            /**
             * 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>

this.jurisdictions.push(response.data);

this.localJurisdictions = this.jurisdictions

this.localJurisdictions.push(response.data);