0

Имеется компонент App в котором посредством роутера вызываются два дочерних компонента Admin и Home. При вызове метода addCar в Admin добавляется в массив и отображается по адресу http://localhost:8080/#/Admin в выпадающем списке, то есть, он добавлен в data(). Первый вопрос: Подскажите, почему он тогда не сохраняется и не отображается в по адресу: http:// localhost:8080/#/ в выпадающем списке? Может быть я чего-то не понимаю? Или моя "проблема" связана с отсутствием сохранения в базу данных? Второй вопрос: Для оптимизации кода стоит ли использовать Vuex? Говорю сразу, относительно недавно начал изучать Vue как и программирование в целом, поэтому прошу прощения за некоторую избыточность в коде и за ошибки в описании вопроса. Ссылка на проект в песочнице: https://codesandbox.io/s/staging-thunder-xeuw8?file=/src/components/CarList.vue

App.vue

<template>
    <div id="app">
        <b-navbar toggleable="lg" type="dark" variant="dark" sticky>
            <div class="container">
                <router-link to="/">
                    <b-button variant="success">Домой</b-button>
                </router-link>
                <router-link to="/Admin">
                    <b-button variant="success">Редактирование</b-button>
                </router-link>
            </div>
        </b-navbar>
        <router-view/>

        <footer id="sticky-footer" class="py-3 py-sm-3 bg-dark text-white-50 fixed-bottom">
            <div class="container text-center">
                <small>Developed by Kovalsky</small>
            </div>
        </footer>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                cars: [
                    {
                        id: 1, title: 'ГАЗ(САЗ)',
                        works: [
                            {
                                titleOfWork: 'Название работы1',
                                cost: 'Стоимость1'
                            },
                            {
                                titleOfWork: 'Название работы2',
                                cost: 'Стоимость2'
                            },
                            {
                                titleOfWork: 'Название работы3',
                                cost: 'Стоимость3'
                            },
                        ]
                    },
                    {
                        id: 2,
                        title: 'ГАЗель до 2002 года',
                        works: [
                            {
                                titleOfWork: 'Название работы21',
                                cost: 'Стоимость21'
                            },
                            {
                                titleOfWork: 'Название работы22',
                                cost: 'Стоимость22'
                            },
                            {
                                titleOfWork: 'Название работы23',
                                cost: 'Стоимость23'
                            },
                            {
                                titleOfWork: 'Название работы23',
                                cost: 'Стоимость23'
                            }
                        ]
                    },
                    {
                        id: 3, title: 'ГАЗель NEXT',
                        works: [
                            {
                                titleOfWork: 'Название работы31',
                                cost: 'Стоимость31'
                            },
                            {
                                titleOfWork: 'Название работы32',
                                cost: 'Стоимость32'
                            },
                            {
                                titleOfWork: 'Название работы33',
                                cost: 'Стоимость33'
                            },
                        ]
                    },
                ],
                selectedCar: {
                    works: ''
                },
                work: {titleOfWork: '', cost: ''}
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }


    /*#nav a {*/
    /*  font-weight: bold;*/
    /*  color: #2c3e50;*/
    /*}*/

    /*#nav a.router-link-exact-active {*/
    /*  color: #42b983;*/
    /*}*/
</style>

Admin.vue

<template>
    <div class="admin">
        <h1>Редактирование</h1>
        <hr>
        <div class="container">
            <AdminCarList
                    :carsFromApp="adminCars"
                    @change="onChangeSelectedCar"
                    @addCar="addCar"
            />
            <AdminCarWorks
                    :car="selectedCar"
                    :carWorks="selectedCar.works"
                    :adminWork="selectedCar.works.work"
                    @click="addWork"
                    @remWork="removeWork"
            />
        </div>
    </div>
</template>

<script>
    import App from "../App";
    import AdminCarWorks from "../components/AdminCarWorks";
    import AdminCarList from "../components/AdminCarList";
    import Work from "../models/Work";
    import Car from "../models/CarModel";
    export default {
        name: 'app',
        data() {
            return {
                adminCars: App.data().cars,
                selectedCar: {
                    works: ''
                }
            }
        },
        props: ['carsFromApp', 'cars'],
        components: {
            AdminCarList, AdminCarWorks
        },
        methods: {
            onChangeSelectedCar: function (selectedCarTitle) {
                this.selectedCar = this.adminCars.find(car => car.title === selectedCarTitle);
            },
            addWork: function (newWork) {
                this.work = newWork;
                this.selectedCar.works.push(this.work);
                console.log(this.selectedCar.works.length)
            },
            removeWork: function (index) {
                console.log(index);
                this.selectedCar.works.splice(index, 1);
            },
            addCar: function (titleOfCar) {
                console.log(titleOfCar)
                if (titleOfCar.length == 0) {
                    alert('Введите, пожалуйста, модель автомобиля')
                } else {
                    let nWorks = [];
                    nWorks.push(new Work('', 0));
                    let idNCar = this.adminCars.length + 1;
                    console.log(this.adminCars.length);
                    this.adminCars.push(new Car(idNCar, titleOfCar, nWorks))
                    console.log('AdminCars length = ', this.adminCars.length)
                }
            }
        }
    }
</script>

Home.vue

<template>
    <div id="home">
        <h1>Сонар Тахография</h1>
        <hr>
        <CarList
                :carsFromApp="cars"
                @change="onChangeSelectedCar"
        />
        <hr>
        <CarWorks
                :car="selectedCar"
                :class="selectedCar.id"
                :car-works="selectedCar.works"
        />
    </div>
</template>

<script>
    import CarList from "../components/CarList";
    import CarWorks from "../components/CarWorks";
    import App from "../App";
    export default {
        name: 'app',
        data() {
            return {
                // cars: [
                //     {
                //         id: 1, title: 'ГАЗ(САЗ)',
                //         works: [
                //             {
                //                 titleOfWork: 'Название работы1',
                //                 cost: 'Стоимость1'
                //             },
                //             {
                //                 titleOfWork: 'Название работы2',
                //                 cost: 'Стоимость2'
                //             },
                //             {
                //                 titleOfWork: 'Название работы3',
                //                 cost: 'Стоимость3'
                //             },
                //         ]
                //     },
                //     {
                //         id: 2,
                //         title: 'ГАЗель до 2002 года',
                //         works: [
                //             {
                //                 titleOfWork: 'Название работы21',
                //                 cost: 'Стоимость21'
                //             },
                //             {
                //                 titleOfWork: 'Название работы22',
                //                 cost: 'Стоимость22'
                //             },
                //             {
                //                 titleOfWork: 'Название работы23',
                //                 cost: 'Стоимость23'
                //             },
                //             {
                //                 titleOfWork: 'Название работы23',
                //                 cost: 'Стоимость23'
                //             }
                //         ]
                //     },
                //     {
                //         id: 3, title: 'ГАЗель NEXT',
                //         works: [
                //             {
                //                 titleOfWork: 'Название работы31',
                //                 cost: 'Стоимость31'
                //             },
                //             {
                //                 titleOfWork: 'Название работы32',
                //                 cost: 'Стоимость32'
                //             },
                //             {
                //                 titleOfWork: 'Название работы33',
                //                 cost: 'Стоимость33'
                //             },
                //         ]
                //     },
                // ],
                cars: App.data().cars,
                selectedCar: {
                    works: ''
                },
                work: {titleOfWork: '', cost: ''}
            }
        },
        components: {
            CarList, CarWorks
            // ViewWorks
        },
        methods: {
            onChangeSelectedCar: function (selectedCarTitle) {
                this.selectedCar = this.cars.find(car => car.title === selectedCarTitle);
            }
        },
        props: ['carsFromApp']
    }
</script>

<style>

</style>

1 ответ 1

1
  1. Попробуйте установить для начала vue-js-json-server и поиграть там с удалением и добавлением. Это Вам поможет на начальных этапах получиться представление и потом перейдете к БД.

  2. Vuex обычно втыкают на крупных приложениях. В Вашем случае приложение не большое (не нужен vuex), но получить опыт работы можно. Поставьте vuex это будет полезной практикой.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.