Hello friends,
I've been grappling with this issue for quite some time now, despite following basic tutorials.
In my Vue 3 project, I'm trying to display JSON data. When the data is within an array and I use a loop, everything works fine. However, if the data isn't in an array, I encounter errors or the data gets concatenated together.
Below is the Vuex store I have created:
const region = {
state: {
region: {}
},
mutations: {
SET_REGION(state, region) {
state.region = region
}
},
actions: {
getAllRegions({ commit }) {
axios.get("/api/regions/get")
.then(response => {
commit('SET_REGION', response.data)
})
}
},
getters: {
getAllRegions (state) {
return state.region
},
getDelegue (state) {
return state.region.delegue
}
}
};
Upon calling this data on my page, I receive the following output:
[
{
id: 3,
name: "Occitanie",
agents: [ ],
delegue: null
},
{
id: 2,
name: "Ile de France",
agents: [ ],
delegue: null
},
// More data here...
]
The result appears satisfactory to me. However, when it comes to displaying the data in Vue, I face challenges specifically with the "DELEGUE" data.
<div v-for="region in myFunctionToRetrieveJsonData">
<p>Name: {{ region.name }}</p> // WORKING
<p v-for="agent in region.agents">
{{ agent.lastname + ' ' + agent.firstname }}<br> // WORKING
{{ agent.phone }}<br> // WORKING
<span v-for="email in agent.user">{{ email }}</span> // WORKING
Delegue: {{ agent.delegue.lastname + ' ' + agent.delegue.firstname }} // NOT WORKING
// THE OTHER WAY
<p v-for="delegue in region.delegue">
Delegue: {{ delegue }} // DISPLAY: DURSLEYJake+3309987654321{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8aab8ac58a">[email protected]</a>"} NOT GOOD
</p>
</p>
</div>
Encountering the error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'lastname')It seems that while I can iterate over USERS using a v-for loop, accessing DELEGUE directly poses a challenge. Any suggestions or ideas from your end would be greatly appreciated!
Thank you all for your support.
Logan