Как организовать данные в vue компоненте в одну структуру? - PullRequest
Новая
       20

Как организовать данные в vue компоненте в одну структуру?

1 голос
/ 11 июля 2020

Может быть сложный вопрос, но я хочу попробовать ...

В компоненте vue (который является модальным окном для слайдера администрирования с несколькими типами слайдов, такими как видео, изображение ...), я хочу иметь весь модальный структура в объекте json. Итак, я был создан baseTypeStructure (входные данные общие для всех типов слайдов), avalibleTypeStructure (входные данные для указанного c типа слайда) и activeTypeStructure (полная структура входных данных после выбора какого-либо типа слайда)

Но Я в vue (и js) довольно новый, и у меня проблемы с реактивностью ...

Итак, если вы выберете какой-то тип слайда, я привяжу activeTypeStructure из baseTypeStructure и укажите c наберите от avalibleTypeStructure. (по типу ключа)

Но у меня проблемы с реактивностью ... С одной стороны, мне нужно реактивное поведение, потому что есть входные значения ... с другой стороны есть информация о видимости ... и если я изменю в activeTypeStructure видимость на true, это значение изменяется в avalibleTypeStructure, если я делаю клон (без реактивности), при каждом изменении типа слайда я сбрасываю все значения ...

Кто-нибудь может помочь с этим? Разрешите это таким образом (как один формат json для всего модального окна). Может быть, абсолютно плохое мышление? 

    data() {
        return {
            detailModalIsOpened: false,
            loading: false,
            action: '',
            title: 'default',
            baseTypeStructure: {
                inputs: {
                    name: {
                        visible: true,
                        value: ''
                    },
                    type: {
                        visible: true,
                        value: '',
                        selected: [],
                        slideTypes: []
                    },
                    duration: {
                        visible: true,
                        value: 5000
                    },
                    image: {
                        inputs: {
                            imageFile: {
                                visible: false,
                                value: ''
                            }
                        }
                    },
                    video: {
                        inputs: {
                            videoFile: {
                                visible: false,
                                value: ''
                            }
                        }
                    }
                }
            },
            avalibleTypeStructures: {
                none: {},
                image: {
                    // name: 'image',
                    inputs: {
                        imageFile: {
                            visible: true,
                            value: ''
                        }
                    }
                },
                video: {
                    // name: 'video',
                    inputs: {
                        videoFile: {
                            visible: true,
                            value: ''
                        }
                    }
                }
            },
            activeTypeStructure: {},
        }
    }
...