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>