This is driving me nuts as should be easy
I have in nuxt
<template>
<div>
<!-- Events are displayed here -->
<div
v-for='organisation in organisations'
:key='organisation.id'
>
test {{ organisation }}
</div>
</div>
</template>
<script>
import gql from "graphql-tag";
export default {
data() {
return {
organisations: {
data: [],
},
};
},
apollo: {
organisations: gql`
query organisations {
organisations {
data {
attributes {
name
}
id
}
}
}`
}
};
</script>
this returns
{ "data": [ { "id": "1", "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "2", "attributes": { "name": "test2", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "3", "attributes": { "name": "test3", "__typename": "Organisation" }, "__typename": "OrganisationEntity" } ], "__typename": "OrganisationEntityResponseCollection" }
{ "data": [ { "id": "1", "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "2", "attributes": { "name": "test2", "__typename": "Organisation" }, "__typename": "OrganisationEntity" }, { "id": "3", "attributes": { "name": "test3", "__typename": "Organisation" }, "__typename": "OrganisationEntity" } ], "__typename": "OrganisationEntityResponseCollection" }
so far so good
now if i try
{{ organisation.name }}
I get no results
I tried changing my v-for to
v-for='organisation in organisations.data'
and
{{ organisation.name }}
the original high level query still works adding .name returns no results but no error.
{{ organisation.attributes.name }}
generates an error
TypeError: Cannot read properties of undefined (reading 'name')
at eval (organisations.vue?1a5e:7:1)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2001:1)
at Proxy.render (organisations.vue?1a5e:4:1)
at Vue._render (vue.runtime.esm.js?2b0e:2654:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:3833:1)
at Watcher.get (vue.runtime.esm.js?2b0e:3415:1)
at Watcher.run (vue.runtime.esm.js?2b0e:3491:1)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4090:1)
at Array.eval (vue.runtime.esm.js?2b0e:3113:1)
at flushCallbacks (vue.runtime.esm.js?2b0e:3035:1)