Level 3
Did you parse the JSON response you got from Axios before storing it in vuex? The quotes around the property names suggest it might still be JSON and not a proper object.
Sep 27, 2022
3
Level 2
Property of an object is not readable
Good morning coders !! I request your help today because i face a very weird problem and i dont know how to solve it, let me explain it...
In a vue component i want to display some informations that are stored in my vuex state (that are fetched correctly from a laravel API, i checked this) But for a very weird reason, i cant read the value of a property of a level 2 object (the "particularity.name") in my API response data. I tried many solutions like doing basic axios request or use the composition API syntax but it still doesnt work and ive got the exact same error message I tried also to use the mapState helper but it still doesnt work and i dont know why...
The most weird problem is that in my vue component, it can interpolate the whole data object, but when i want to display the "particularity.name" property i have this error message from vue and the component doesnt display :
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
Here is the code of my vue component :
<template>
<div class="w-[95%] mx-auto">
<div class="card">
<h1 class="card-header">Caractéristiques</h1>
<div class="card">
<h1 class="card-header">Trait : {{ characterInfos.profile.name }}</h1>
<div class="mt-2 text-center text-sm text-white bg-black p-2 rounded-md w-full">
<p>{{ characterInfos.name }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: mapState({
characterInfos : state => state.character
}),
}
</script>
When i interpolate the whole "characterInfos" object ive got this :
Trait : { "id": 1, "user_id": 1, "level": 5, "name": "Dr. Korbin Flatley", "gender": "F", "age": 27, "height": "189", "trait_id": 4, "profile_id": 3, "profile": { "id": 3, "name": "inventore", "description": "Sequi voluptas minus similique delectus. Quia eligendi qui vero." }, "particularity": { "id": 4, "name": "illum", "description": "Ut facilis provident omnis numquam doloremque. Sed officia vel distinctio distinctio quibusdam natus." } }
NB : If i'm correct to access the name property of the particularity object i have to write "characterInfos.particularity.name" right ?
I dont know where my mistake is and what im doing wrong.
I thank you a lot for your help
Level 2
No i didnt parse the JSON response before storing because in my opinion i dont need to it (maybe im wrong but i didnt have to do such a thing in my previous same projects)
I double checked in the vuedevtools and im sure that i receive a correct JS object
Here is what i got from the vuex store :
character:Object
age:38
attributes:Array[6]
gender:"M"
height:"172"
id:1
level:3
name:"Megane Swift"
particularity:Object
profile:Object
profile_id:1
trait_id:7
user_id:1
Level 3
Axios automatically converts JSON into a javascript object if the response header the server sends is 'application/json' and the JSON is well-formed.
What's peculiar about your characterInfos is that the object appears to have no root element. It has two objects, Trait and particularity, with the latter in quotes—that doesn't look correct. You could check if the JSON you try to send is valid and the correct header is set from the server.
Please or to participate in this conversation.