source: ReserveNGo-frontend/src/components/Project/Locale_listing_container.vue

<script>
import Local_in_local_listing from '@/components/Project/local_in_local_listing.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  components: { Local_in_local_listing },

  data() {
    return {
      /*locale: {
        name: 'Restaurant name',
        address: 'Restaurant address',
        workingHours: '00:00',
        availableServices: ['pet Friendly', 'WiFI'],
        averageRating: 0,
      },*/
      locals: [],
    }
  },
  mounted() {
     fetch('http://localhost:8080/api/locals')
      .then(res => res.json())
      .then(data => this.locals = data)
       .catch(err => console.log(err));
  },
})
</script>

<template>
  <div id="container" class="">
    <div v-for="locale in locals" :key="locale">
      <Local_in_local_listing
      :local="locale"/>
      <!--      <Local_in_local_listing/>-->
    </div>

    <!--    <Local_in_local_listing/>
    <Local_in_local_listing/>
    <Local_in_local_listing/>
    <Local_in_local_listing/>-->
  </div>
</template>

<style scoped>
#container {
  margin: 30px auto;
}
</style>