Question

我有一个模态组件需要一些输入，在后端创建一个记录，然后作为成功响应的一部分，我想将数据推送到父范围内的对象。

我已经尝试通过我希望附加的数据成功地从孩子那里发出一个事件，但我似乎无法解决这个问题。

当addNote（）成功完成更新父作用域上“notes”数组对象的最佳方法时，我会在组件中找到数据吗？

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

对于一个人来说，由于app，您正在设置一个全局变量new Vue()，然后通过设置addNote在app = this方法中删除该变量。这会将变量变为完全不同的东西。

此外，您不会显示任何正在聆听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从模态组件更新父范围

1 个答案: