How do I render my results using graphql in Vuejs

Viewed 30

I am learning graphql and using strapi as a backend nuxt as a front end

I have set up the backend and am now trying to display the results

I have the following code, it is returning the results but I cannot for the life of me figure out how to display just the name field, can you assist

<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 {

    };
  },
  apollo: {
    organisations: gql`
      query organisations {
        organisations {
            data {
            attributes {
                name
            }
            id
            }
        }
    }`
  }
};
</script>

returns

    test [ { "attributes": { "name": "Organisation 1", "__typename": "Organisation" }, "id": "1", "__typename": "OrganisationEntity" }, { "attributes": { "name": "test2", "__typename": "Organisation" }, "id": "2", "__typename": "OrganisationEntity" } ]
test OrganisationEntityResponseCollection

if i try {{ organisation.name }} it returns no error but nothing displayed, if I try {{ organisation.attributes.name }} i get an error

Thanks

1 Answers

Ah, I should have had

v-for='organisation in organisations.data' 

in my v-for, now working

Related