Vue2 从模态组件更新 parent 范围

Question

我有一个模态组件，它接受一些输入，在后端创建一条记录，然后作为成功响应的一部分，我想将数据推送到 parent 范围内的 object .

我已经尝试从 child 发出一个事件，以成功处理我想附加的数据，但我似乎无法触发它。

当 addNote() 成功完成时，用我在组件中取回的数据更新 parent 范围上的 "notes" 数组 object 的最佳方法是什么？

Vue.component('modal', {
    template: '#modal-template',
    data: function() {
        return {correctiveAction: this.correctiveAction}
    },
    props: ['notes'],
    methods: {
        addNote: function () {
            axios.get('/quality/ajax/add-note/', {
                params: {
                    action: this.correctiveAction
                }
            }).then(function (response) {
                // append new corrective action
                app = this;
                this.$emit('addingNote', response.data.data.success[0].data);
                //app.notes.push(response.data.data.success[0].data);
                swal({
                    title: "Boom!",
                    type: "success",
                    text: "Corrective Action Successfully Added",
                });
            }).catch()
        }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        segment: "",
        customer: "",
        product: "",
        startDate: "",
        endDate: "",
        notes: "",
        showModal: false,
        correctiveAction: ""

    },
    delimiters: ["<%","%>"],
    methods: {
        refresh: function () {
            location.reload();
        },
        getNotes: function () {
            app = this
            axios.get('/quality/ajax/get-notes/').then(function (response) {
                // populate notes
                app.notes = response.data.data.success[0].notes

            }).catch()
        },
        removeNote: function (id, index) {
            app = this
            axios.get('/quality/ajax/remove-note/', {
                params: {
                    id: id
                }
            }).then(function () {
                // remove note from list
                app.notes.splice(index, 1);
                swal({
                    title: "",
                    type: "success",
                    text: "Corrective Action Successfully Removed",
                });

            }).catch(function (err) {

                console.log(err)
                swal({
                    title: "",
                    type: "warning",
                    text: "Error Deleting Corrective Action",
                });
                return;

            });
        },
        generateReport: function () {

            $('#loading').show();



            }).catch()
        }
    }

});

// get all active corrective actions
app.getNotes();

Answer 1

好吧，作为 new Vue() 的结果，您设置了一个全局变量 app，然后您通过设置 [=15] 在 addNote 方法中将该变量吹走了=].这会将变量更改为完全不同的东西。

此外，您没有显示任何监听 addingNote 事件的内容。

不要到处使用应用程序。使用作用域变量。

getNotes: function () {
    const self = this
    axios.get('/quality/ajax/get-notes/').then(function (response) {
        // populate notes
        self.notes = response.data.data.success[0].notes
    }).catch()
},

并更改 addNote。

addNote: function () {
   const self = this
   axios.get('/quality/ajax/add-note/', {
       params: { action: this.correctiveAction}
   }).then(function (response) {
       // append new corrective action
       self.$emit('addingNote', response.data.data.success[0].data);
       swal({
           title: "Boom!",
           type: "success",
           text: "Corrective Action Successfully Added",
       });
   }).catch()
}

看来您也应该修复 removeNote。

Vue2 从模态组件更新 parent 范围

Vue2 update parent scope from modal component

vue.js

vue-component

vuejs2