TransWikia.com

vuejs retorna objeto student null ao tentar buscar estudante por id

Stack Overflow em Português Asked by Wellington César on December 2, 2021

Galera.
Eu estou com um problema agora.
Consegui resolver o erro 400, mas agora eu não estou conseguindo retornar os dados do estudante pelo id dele.
Segue meu código abaixo:

    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()
        }
    }
}

erros:

[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

3 Answers

Isso tem cara de problema de escopo (this), vc pode resolver fazendo assim:

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()
    }
}

Answered by Iago Cavalcante on December 2, 2021

As vezes o axios muda a referência do "this" e então você não consegue acessá-lo para atribuir o valor de resposta para "student", para resolver isso uma possível solução seria deixar seu método updateStudent da seguinte maneira:

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

Answered by Vitor Ceron on December 2, 2021

Para resolver este problema específico, no seu bloco catch, você deve tratar os dados para você ter um retorno esperado. Segue um exemplo de como seria o block catch:

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

Após fazer este tratamento não deve mais ocorrer o erro "TypeError: Cannot read property 'student' of null".

Porém gostaria de deixar claro que este não é a causa raiz do seu problema, apenas vai tratar para o objeto student não ser nulo, após ocorrer um erro na requisição.

Answered by Danizavtz on December 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP