متین طیبی نیا
4 سال پیش توسط متین طیبی نیا مطرح شد
0 پاسخ

طراحی لیستی شبیه به دسته بندی دیوار با vue و laravel

سلام دوستان
همین اول بگم قصدم یادگیریه و نه چیز دیگه من یک طرحی همینطوری برای خودم میزنم تا یک جاهایی شو خودم تونستم طراحی کنم
این لیست دسته بندی های دیوار هستش
دیوار

و این لیست من هستش
لست من

تقریبا مثل دیوار کار میکنه دسته بندی از کنترولر گرفته و در vue.js بر اساس parentid دسته بندی میکنه و هیچ مشکلی نداره
مشکلی اصلی اینکه من نمیدنم چطوری طراحی کنم وقتی شما دسته ها را انتخاب کردید id اونارو داخل یک ارایه ذخیره کنه و اونارو به صفحه ثبت آگهی(یک ویو فرم دیگه) و سمت کنترل بفرسته. تمام مایگریشن ها و جداول جوین درست و جداول دسته بندی و اگهی با هم در ارتباط هستند.
میخواستم بدونم درمورد این مسئله یکی میتونه کمکم کنه که چطوری طراحیش کنم

بازم میگم من واقعا برای یادگیری دارم این کارو انجام میدم و اینم کد من هستش :


<template>
    <div>
        <loading></loading>
        <ol class="parent">
            <li>
                <span v-show="typeof parent.name_category!=='undefined'"
                      style="cursor: pointer" @click="getChildren(parent.parent_id,child)">
                        <span v-show="parent.parent_id!==0">
                              بازگشت از دسته {{parent.name_category}}
                            <i class="fa fa-angle-right"></i>
                        </span>

                </span>
            </li>
        </ol>
        <ul class="m-4">
            <li id="liCat" class="liCategory" v-for="cat in category" @click="sendCategoryId(cat.id,child)"
                v-bind:key="cat.id">
                {{cat.name_category}}
                <i class="fa fa-angle-left "></i>

            </li>
        </ul>

    </div>
</template>
<script>
    export default {
        name: "newAdvert",
        data() {
            return {
                hold: [],
                parent: [],
                processing: true,
                category: [],
                child: [],
                cat: {
                    parent_id: '',
                    name_category: '',
                    id: '',
                },
            }
        },
        created() {
            this.show()
        },
        methods: {
            show() {
                axios.get('/show').then(res => {
                    let x = res.data;
                    this.child = res.data;
                    this.sendCategoryId(1, x)
                    this.findParent(1, x)
                }).catch(error => console.log(error));
            },
            sendCategoryId(id, categories) {
                let x = [];
                for (let i = 0; i < categories.length; i++) {
                    if (categories[i].parent_id === id) {
                        x = x.concat(categories[i]);

                    }
                }
                this.category = x;

                this.findParent(id, categories)

            },
            findParent(id, categories) {
                let parent = [];
                const length = categories.length;
                for (let i = 0; i < length; i++) {
                    if (categories[i].id === id) {
                        parent = categories[i];
                    }
                }
                this.parent = parent;
            },
            getChildren(id, categories) {
                let x = [];
                for (let i = 0; i < categories.length; i++) {
                    if (categories[i].parent_id === id) {
                        x = x.concat(categories[i]);

                    }
                }
                this.category = x;
                this.findParent(id, categories)
            },

        }
    }
</script>```

ثبت پرسش جدید

به همدیگه کمک کنیم

به متین طیبی نیا کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام