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

export default defineComponent({
  components: { Local_in_local_listing },

  data() {
    return {
      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"/>
    </div>
  </div>
</template>

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