Vuejs 3 Darija Review App الجزء الثالت

فهاد الجزء الثالت والأخير من Vuejs 3 Darija Review App غادي نكملوا ل projet ديالنا ونزيدو ل components لي بقاو باش نعرضوا reviews نديروا عليهم التعديلات والحذف ديالهم.

1- إضافة Home Component

ف dossier components زيد fichier سميه Home.vue ولي فيه هاد الكود :

عرض الكود

                                                    
                                                        //
<template>
  <div class="card">
    <div class="card-body">
      <Form />
      <AverageRating />
      <ul class='mt-4 list-group'>
        <ListItem 
          v-for="review in store.getReviews" 
          :key="review.id"
          :review="review" />
      </ul>
    </div>
  </div>
</template>

<script setup>
  import ListItem from './ListItem.vue'
  import Form from './Form.vue'
  import AverageRating from './AverageRating.vue'
  import { useReviewStore } from '../stores'
  import { reactive } from '@vue/runtime-core';

  //get store
  const store = useReviewStore();

  //set data
  const data = reactive({
    reviewToEdit: null
  });

</script>

<style>
</style>

2- إضافة EditReview Component

دائما ف dossier components زيد fichier سميه EditReview.vue ولي فيه هاد الكود :

عرض الكود

                                                        
                                                            //
<template>
    <Form 
        :updating="data.updating"
        :reviewId="route.params.id"/>
</template>

<script setup>
    import { reactive, onMounted } from '@vue/runtime-core';
    import Form from './Form.vue'
    import { useReviewStore } from '../stores'
    import { useRoute } from 'vue-router';
    
    //set data
    const data = reactive({
        reviewId: '',
        updating: true
    });

    //get route 
    const route = useRoute();

    //get review to edit on mounted
    onMounted(() => {
        data.reviewId = route.params.id;
    });
</script>

<style>
</style>

3- تعديل ل App Component

منبعد غادي نديرو تعديل على ل App component ودير npm run dev باش ت démarrer serveur.

الكود ديال الملف هو :

عرض الكود

                                                        
                                                            //
<template>
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <Header />
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
  import Header from './components/Header.vue'
  import Home from './components/Home.vue'
</script>


<style>
</style>