Building And Deploying a Vue.js Application Using Strapi on Render

2

Hey,

I’ve followed this step by step and when calling the data, nothing is displaying?

This is my code:

<div class="flex items-center mx-auto">
    <div class="flex-1 max-w-6xl mx-auto p-10 items-center">
      <ul class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 px-2">
        <div v-if="planeitems.length">
          <div v-bind:key="planeitem.index" v-for="planeitem in planeitems">
            <li class="mx-auto items-center p-2 rounded-lg md:h-full h-full">
              <img :src="imageLink + planeitem.image" />
              <h5 class="text-lg font-bold mt-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500">{{ planeitem.title }}</h5>
              <p class="text-sm mx-auto mt-2">
              {{ planeitem.description }}
              </p>
            </li>
          </div>
        </div>
      </ul>
    </div>
  </div>

This is what is in my tag:

<script>
export default {
  name: 'PlanesPage',
  data() {
    return {
      planeitems: [],
      imageLink: "http://localhost:1337/api/planeitems/"
    }
  },
  mounted() {
    fetch("http://localhost:1337/api/planeitems")
    .then((res) => res.json())
    .then((data) => {
      this.planeitems = data;
    });
  }
};
</script>

I am using TailwindCSS – please could you advise? :slight_smile:

Thanks!