Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2020, 11:27
Интересующийся
Отправить личное сообщение для Малик Посмотреть профиль Найти все сообщения от Малик
 
Регистрация: 12.02.2020
Сообщений: 23

Помощь в понимании VueJS
Добрый день всем!
Новичок во фронте, и передо мной встала немного сложная для меня задача. Состоит она в том чтобы нижеприведённый html со скриптом, перепесать с использованием vue. С VueJS еще не сталкивался, поэтому вообще не понимаю как это сделать, может кто нибудь подсказатьили помочь?

Парни очень нужна помощь! Сам в долгу не останусь)

<body>
    <form>
        <div class="container row col-md-4 mt-4" id="d1">
            <div class="profile">
                <label>Имя</label>
                <input type="text" id="FirstName" class="form-control" placeholder="First name">
                <label>Фамилия</label>
                <input type="text" id="LastName" class="form-control" placeholder="Last name">
                <label>Город</label>
                <input type="text" id="City" class="form-control" placeholder="City">
                <label>Телефон</label>
                <input type="tel" id="Phone" class="form-control" placeholder="Number">
                <label>Вакансия</label>
                <select class="form-control" id="Vacancy">
                    <option selected>Choose...</option>
                    <option value="Backend">Backend Developer</option>
                    <option value="Web-Design">Web Design</option>
                    <option value="Frontend">Frontend Developer</option>
                </select>
            </div>
            <input type="button" value="Далее" class="btn profile btn-primary" onclick="document.getElementById ('d1').style.display = 'none';
                     document.getElementById ('d2').style.display = 'block'"> </div>
        <div id="d2" style="display: none;" class="container">
            <div class="form-5 form-group">
                <label for="Question" class="question">Вопрос:</label>
                <input type="text" class="form-control" id="validationTextarea" placeholder="Какие языки программирования Вы используете?"> </div>
            <div class="custom-control custom-checkbox form-control form-6">
                <input type="checkbox" class="custom-control-input" id="CustomCheck1" value="c#">
                <label class="custom-control-label" for=>C#</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-7">
                <input type="checkbox" class="custom-control-input" id="CustomCheck2" value="c++">
                <label class="custom-control-label" for="CustomCheck2">C++</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-8">
                <input type="checkbox" class="custom-control-input" id="CustomCheck3" value="asp.net">
                <label class="custom-control-label" for="CustomCheck3">ASP.NET</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-9">
                <input type="checkbox" class="custom-control-input" id="CustomCheck4" value="php">
                <label class="custom-control-label" for="CustomCheck3">PHP</label>
                <br> </div>
            <input type="button" value="Далее" class="btn btn-primary" onclick="document.getElementById ('d2').style.display = 'none';
                             document.getElementById ('d3').style.display = 'block'"> </div>
        <br>
        <div id="d3" style="display: none;" class="container">
            <div class="form-5 form-group">
                <label for="Question" class="question">Вопрос:</label>
                <input type="text" class="form-control" id="validationTextarea" placeholder="С какими СУБД Вам приходилось работать?"> </div>
            <div class="custom-control custom-checkbox form-control form-6">
                <input type="checkbox" class="custom-control-input" id="CustomCheck5" value="mssql">
                <label class="custom-control-label" for="CustomCheck5">MS-SQL Server 2000-2012/T-SQL</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-7">
                <input type="checkbox" class="custom-control-input" id="CustomCheck6" value="oracle">
                <label class="custom-control-label" for="CustomCheck6">Oracle</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-8">
                <input type="checkbox" class="custom-control-input" id="CustomCheck7" value="mysql">
                <label class="custom-control-label" for="CustomCheck7">MySQL</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-9">
                <input type="checkbox" class="custom-control-input" id="CustomCheck8" value="postgresql">
                <label class="custom-control-label" for="CustomCheck8">PostgreSQL</label>
                <br> </div>
            <input type="button" value="Далее" class="btn btn-primary" onclick="document.getElementById ('d3').style.display = 'none';
                             document.getElementById ('d4').style.display = 'block'"> </div>
        <br>
        <div id="d4" style="display: none;" class="container">
            <div class="form-5 form-group">
                <label for="Question" class="question">Вопрос:</label>
                <input type="text" class="form-control" id="validationTextarea" placeholder="С какими системами контроля версий Вы работали?"> </div>
            <div class="custom-control custom-checkbox form-control form-6">
                <input type="checkbox" class="custom-control-input" id="CustomCheck9" value="git">
                <label class="custom-control-label" for="CustomCheck9">GIT</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-7">
                <input type="checkbox" class="custom-control-input" id="CustomCheck10" value="cvs">
                <label class="custom-control-label" for="CustomCheck10">CVS</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-8">
                <input type="checkbox" class="custom-control-input" id="CustomCheck11" value="subversion">
                <label class="custom-control-label" for="CustomCheck11">Subverion</label>
            </div>
            <div class="custom-control custom-checkbox form-control form-9">
                <input type="checkbox" class="custom-control-input" id="CustomCheck12" value="mercurial">
                <label class="custom-control-label" for="CustomCheck12">Mercurial</label>
                <br> </div>
            <input type="submit" value="Далее" class="btn btn-primary" onclick="convert_to_json(event); document.getElementById ('d4').style.display = 'none';
        document.getElementById ('d5').style.display = 'block';
        document.getElementById ('d6').style.display = 'block'"> </div>
        <br>
        <div class="result-t" id="d6" style="display: none">
            <label class="result-header"> User Information:</label>
        </div>
        <div id="d5" style="display: none;" class="result-t">
            <output class="output-result"></output>
        </div>
    </form>
</body>



<script>
    function convert_to_json(event) {
        event.preventDefault();
        const checArr = arr => arr.filter(({
            checked
        }) => checked).map(({
            value
        }) => value);
        profile = {
            Name: FirstName.value
            , Lastname: LastName.value
            , City: City.value
            , Phone: Phone.value
            , Vacancy: Vacancy.value
        , };
        results = {
            Lang_list: checArr([CustomCheck1
                , CustomCheck2
                , CustomCheck3
                , CustomCheck4
            ])
            , SUBD_list: checArr([CustomCheck5
                , CustomCheck6
                , CustomCheck7
                , CustomCheck8
            ])
            , SystemControl_list: checArr([CustomCheck9
                , CustomCheck10
                , CustomCheck11
                , CustomCheck12
            ])
        };

        function recursiveList(data) {
            let newlist = document.createElement("ul")
                , item, children;
            newlist.classList.add('myul');
            if (Array.isArray(data)) {
                newlist.className = "ar"
                data.forEach(txt => {
                    item = document.createElement("li");
                    item.appendChild(document.createTextNode(txt));
                    newlist.appendChild(item);
                })
            }
            else if (typeof data == "object") Object.keys(data).forEach(keys => {
                item = document.createElement("li");
                item.appendChild(document.createTextNode(keys));
                newlist.appendChild(item);
                children = recursiveList(data[keys]);
                item.appendChild(children)
            })
            else {
                newlist.className = "dmr"
                item = document.createElement("li");
                item.appendChild(document.createTextNode(data));
                newlist.appendChild(item);
            }
            return newlist
        };
        let json = recursiveList(profile);
        let json2 = recursiveList(results);
        document.querySelector("output").append(json, json2);
    }
</script>

Последний раз редактировалось Малик, 26.02.2020 в 06:34.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь в понимании вопроса по меню slavAAvals Events/DOM/Window 5 24.03.2017 08:56
Требуется помощь с прошивкой баннеров HTML5 Canvas kambodge Работа 0 08.07.2016 13:55
Бесплатная помощь новичкам iCanary Общие вопросы Javascript 11 30.11.2015 20:35
помощь по jquerry анимации rev27 Элементы интерфейса 6 23.04.2014 03:06
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17