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
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP