دریافت تعداد دلخواه از دوره از یک کامپوننت و نمایش ان ها

کد تون رو قرار بدید که راهنمایی کنیم بهتر شما رو

@sj10ss

courses:

<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-6" v-for="(course,index) in courses" :key="index">
                <div class="card">
                    <span class="discount" v-if="!course.free">{{ course.discount }}% تخفیف</span>
                    <a href="#"><img :src="course.img" alt=""></a>
                    <div class="card-body">
                        <a href="#" class="title"><h3>{{ course.title }}</h3></a>
                        <p>{{ course.description }}</p>
                    </div>
                    <div class="card-footer">
                        <div class="float-right price" v-if="course.free">{{ course.price }}</div>
                        <div class="float-right price" v-else>{{ course.price | price }} تومان</div>
                        <div class="float-left course-time"><i class="fas fa-clock"></i>{{ course.courseTime }}</div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Courses",
        data() {
            return {
                courses: [
                    {
                        discount: '20',
                        img: '/images/course/bootstrap4.jpg',
                        title: 'آموزش پروژه محور Bootstrap 4',
                        description: 'میتوان گفت بوت استرپ یکی از محبوب ترین فریمورک های Css جهان است که با استفاده از آن میتوان وبسایت های مختلفی را در سریعترین زمان ممکن بوجود آورد . این...\n' +
                        '\n',
                        price: '70000',
                        courseTime: '۱۷:۳۵:۲۸',
                        free: false
                    },
                    {
                        discount: '20',
                        img: '/images/course/nodejs.png',
                        title: 'آموزش پروژه محور NodeJs',
                        description: 'میتوان گفت بوت استرپ یکی از محبوب ترین فریمورک های Css جهان است که با استفاده از آن میتوان وبسایت های مختلفی را در سریعترین زمان ممکن بوجود آورد . این...\n' +
                        '\n',
                        price: '125000',
                        courseTime: '۱۷:۳۵:۲۸',
                        free: false
                    },
                    {
                        discount: '20',
                        img: '/images/course/react-native.png',
                        title: 'آموزش پروژه محور React Native',
                        description: 'میتوان گفت بوت استرپ یکی از محبوب ترین فریمورک های Css جهان است که با استفاده از آن میتوان وبسایت های مختلفی را در سریعترین زمان ممکن بوجود آورد . این...\n' +
                        '\n',
                        price: '130000',
                        courseTime: '۱۷:۳۵:۲۸',
                        free: false
                    },
                    {
                        discount: '',
                        img: '/images/course/vscode.png',
                        title: 'آموزش کار با Visual Studio Code',
                        description: 'میتوان گفت بوت استرپ یکی از محبوب ترین فریمورک های Css جهان است که با استفاده از آن میتوان وبسایت های مختلفی را در سریعترین زمان ممکن بوجود آورد . این...\n' +
                        '\n',
                        price: 'رایگان',
                        courseTime: '۱۷:۳۵:۲۸',
                        free: true
                    }
                ]
            }
        }
    }
</script>

index:

<template>
    <div>
          <section id="course-section">
            <Course></Course>
        </section>
    </div>
</template>

<script>
    import Course from  '../partials/Courses';

    export default {
        name: "Index",
        components: {
            Course
        }
    }
</script>