VueJS push undefined after array from parent component got updated

Viewed 37

I have this DocSection component (sections is an array of section and section has an array of Lines)

 <DocSection v-if="sections != null" v-for="(s, idx) in sections" :Section="s" :Sections="sections"></DocSection>

in this component i have a method that add a new Section with an emit to update the sections array from the parent component.

 addsection() {
            var v = this;
            this.$http.post(this.url.addsection), {
                success: function (o) {
                    v.$emit("addsection", o);
                }
            };
        },

I also have an AddLine method that create a new Line and push it to the section

 addline() {
            this.Section.Lines.push({ sId: "0", creating: true, productselected: false });
        },

My problem is that when i add a new section and immediately add a new line, the addline function is returning "TypeError: Cannot read properties of undefined (reading 'push')"

But when i add a new section, refresh the page THEN add a new line, it works fine. I know it would be easier using à state management like Vuex but unfortunately i can not use it for this project. Any idea ?

Oh and also i modified the code below since i can not share the real code, so you might find some error syntax, but don't pay attention to it

0 Answers
Related