vuejs returns student object null when trying to search student by id

Question

Galera. I have a problem right now. I was able to solve the 400 error, but now I’m not able to return the student’s data by the student’s id. Follow my code below:

    data() {
        return {
            student: {
                name: "",
                lastname: "",
                telephone: ""
            }
        }
    },
    methods: {
        async updateStudent() {
            const url = http://localhost:5000/students/student
            await axios.put(url, {
                name: this.student.name,
                lastname: this.student.lastname,
                telephone: this.student.telephone
            })
            .then((response) => {
                console.log(response)
                this.student = response.data
            })
            .catch((error) => {
                console.log("Erro!! " + error)     
            })
        },
        clean() {
            this.student.name = ""
            this.student.lastname = ""
            this.student.telephone = ""
        },
        created() {
            this.updateStudent()
            this.clean()
        }
    }
}

mistakes:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'student' of null"

found in

---> <FormSearchStudent>
       <SearchStudent> at src/pages/Students/SearchStudent.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

TypeError: Cannot read property 'student' of null
    at submit (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"574491ba-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Students/FormSearchStudent.vue?vue&type=template&id=6e70ea68& (app.js:1502), <anonymous>:15:43)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLFormElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLFormElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

Answer 1

Sometimes Axios changes the "this" reference and then you cannot access it to assign the response value to "student", to solve this a possible solution would be to leave your updateStudent method as follows:

async updateStudent() {
            let self = this;
            const url = http://localhost:5000/students/student
            await axios.put(url, {
                name: this.student.name,
                lastname: this.student.lastname,
                telephone: this.student.telephone
            })
            .then((response) => {
                console.log(response)
                self.student = response.data
            })
            .catch((error) => {
                console.log("Erro!! " + error)     
            })
        };

Answer 2

This has the face of scope problem (this), you can solve by doing so:

methods: {
    async updateStudent() {
        try {
          const url = http://localhost:5000/students/student
          const { data } = await axios.put(url, {
            name: this.student.name,
            lastname: this.student.lastname,
            telephone: this.student.telephone
          })
          this.student = data
        } catch (error) {
          console.log(error)
        }
        
    },
    clean() {
        this.student.name = ""
        this.student.lastname = ""
        this.student.telephone = ""
    },
    created() {
        this.updateStudent()
        this.clean()
    }
}

Answer 3

To solve this specific problem, in your catch block, you should treat the data to get an expected return. Here’s an example of what the block catch would look like:

.catch((error) => {
    console.log("Erro!! " + error)
    this.student: {
            name: "",
            lastname: "",
            telephone: ""
        }
    })

After doing this treatment should no longer occur error "TypeError: Cannot read property 'student' of null".

But I would like to make it clear that this is not the root cause of your problem, it will only treat for the object student not be null, after an error occurs in the request.