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 это будет полезной практикой.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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